Question

我想隐藏选择选项元素中的滚动条。在Chrome中工作正常但在Safari中没有。

铬：

Safari浏览器：

我一直在阅读这篇文章，在Mozzila文档中说这与Safari兼容：

https://developer.mozilla.org/ca/docs/Web/CSS/overflow-y

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>

    <style>
              select{
                overflow-y: hidden;

              }
    </style>
</head>

<body>

    <div class='container'>

        <select size='2'>

          <option>This is a test</option>
          <option>This is a test 2</option>

        </select>

    </div>

</body>
</html>

你知道发生了什么吗？

Answer 1

尝试通过说

来内联你的CSS

 <select size='2' style="overflow-y: hidden">
      <option>This is a test</option>
      <option>This is a test 2</option>
 </select>

Answer 2

浏览器如何实现overflow属性存在好奇心。目前的标准解决方法是命令

overflow: hidden;
overflow-x: visible;

由于它似乎无法在Safari上运行，因此您必须采用一种与滚动条本身匹配的黑客解决方法：

<style>
    select::-webkit-scrollbar{ width:1px; background-color:transparent }
</style>

CSS - overflow-y：hidden在safari中不起作用

2 个答案: