滚动条内的ol li在Chrome和＆amp;火狐？

Question

在Chrome浏览器中打开： Demo

如果li里面有div滚动条，则ol li号码无效。

在Firefox浏览器中打开： Demo

但是，相同的代码ol li号已经在FF浏览器上运行。

我预计结果是什么在firefox上显示。 ol li的数字为

那是什么问题？我试过但没有得到解决方案。

Answer 1

请参阅它会帮助您的链接。 http://codepen.io/nehemc/pen/dXWZbp

ol {
    width:150px
}
ol li {
    padding-left:30px;
    margin-left:0px;
    display: list-item;
    list-style-position: inside;
}
div {
    width:100px;
    overflow-x:scroll;
    white-space:nowrap;
}

Answer 2

因为您使用了overflow-x:scroll

，所以它隐藏在chrome中

请检查jsfiddle：https://jsfiddle.net/awdmb6s1/

ol {
    counter-reset: section;
    list-style-type: none;
    width:150px
}
li{
  padding-left:30px;
  position:relative;
  list-style:none

}
li:before {
   counter-increment: section;
    content: " "counter(section) ". ";
    position: absolute;
    left: 0;
}
div{
  width:100px;
  overflow-x:scroll;
  white-space: nowrap;
}

Answer 3

在vertical-align: top;标记＆amp;中的css div，li中添加此属性删除填充到ol{ width:150px; } ol li{ padding-left:20px;/*remove this property*/ margin-left:20px; } div{ width:100px; overflow-x:scroll; white-space:nowrap; display: inline-block; vertical-align: top; }标记

＆＃13;

＆＃13;

<ol>
  <li><div> 	Lorem Ipsum is simply dummy text of the printing and typesetting  </div> </li>
  <li><div> 	Lorem Ipsum is simply dummy text of the printing and typesetting  </div> </li>
  <li><div> 	Lorem Ipsum is simply dummy text of the printing and typesetting  </div> </li>
  
  
  </ol>

＆＃13;

<select>

＆＃13;

＆＃13;

＆＃13;