为什么在Chrome中使用CSS3列会删除列表中的项目编号

Question

当我添加css来操纵列数时,我注意到chrome正在删除列表项上的数字...

例如:

<ol style =-webkit-column-count: 2;...">
   ....
</ol>

上面的确设法按照预期将li溢出到一个单独的列中,但它也删除了默认的项目编号.这在Firefox中不会发生,只有chrome.

有任何想法吗？

Answer 1

似乎数字实际上是隐藏的.这可以通过使用以下属性来解决:

OL {
  list-style-position: inside;
}

Answer 2

你可以永远只是抛出一个<div>围绕<ol>并给出了<div>多列代替<ol>.

<div style = -webkit-column-count: 2;...><ol>
    ....
</ol></div>

但是,当我这样做时,由于某种原因,我最终得到的第二列比第一列高一行.也只发生在Chrome中.

编辑:解决我的上述问题只是为了添加零保证金<ol>,所以这应该工作正常:

<div style = -webkit-column-count: 2;...><ol style = margin: 0;>
    ....
</ol></div>

奇怪的是,有一些填充<ol>似乎也摆脱了数字,所以如果你有填充可能是罪魁祸首.