Question

我没有获得镀铬盒子的滚动条，而是进入火狐和网络浏览器

li.box{
    border-radius: 0px;
    padding:0;
    border: solid 1px #8c8d8e;
    overflow: hidden;
    overflow-y:scroll;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    opacity: 0.85;
}

这是JSFiddle链接 http://jsfiddle.net/wydsf2vk/

Answer 1

将高度属性添加到css类，以显示需要设置div的修复高度的滚动条。

Answer 2

您是否偶然在OSX上使用触控板而非鼠标？如果您正在使用触控板，则会隐藏滚动条的某些怪癖。插上鼠标，看它是否出现。

Answer 3

我刚刚检查了你的小提琴，这种情况正在发生，因为你没有将overflow-y: scroll;属性添加到小提琴中。它适用于我的版本（Chrome也是如此）。

http://jsfiddle.net/y8jqsya4/

Answer 4

更改你的CSS： -

height:100px 
border-radius: 0px;
padding:0;
border: solid 1px #8c8d8e;
overflow: hidden;
overflow-y:scroll;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #ffffff;
opacity: 0.85;

http://jsfiddle.net/wydsf2vk/2/

Answer 5

设置该.box的最大高度

Answer 6

您缺少height CSS属性。检查下面的代码段。

.box {
    border-radius: 0px;
    padding:0;
    border: solid 1px #8c8d8e;
    overflow: hidden;
    overflow-y:scroll;
    height: 100px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    opacity: 0.85;
}

<div class="box">
  <p> Hello World 1 </p>
  <p> Hello World 2 </p>
  <p> Hello World 3 </p>
  <p> Hello World 4 </p>
  <p> Hello World 5 </p>
</div>

overflow-y：scroll不适用于chrome

6 个答案: