列表样式类型为无序列表：无； ＆list-style-position：内部； 在Firefox中占用额外的空间

Question

我希望项目符号和数字以适当的方式与整个站点中列表元素中的文本内容垂直对齐。 所以我总是放..

ol, ul { list-style-position: inside; }

但在以下情况下ul哪里子弹是要删除的部分，我用..

ul.nobullet { list-style-type: none; }

在Chrome，Opera和Safari中完美运行。

但是对于Firefox，简单的list-style-type: none; 似乎无法正常工作。 子弹应会消失，但在li元素的左侧仍存在一个间隙（空格）。 我需要添加其他list-style-position: outside; ul.nobullet去除间隙。

我的问题是，为什么这在firefox中特别发生？ 有什么我想念或做错的事吗？

这是一个示例代码。 请注意，在Firefox和Chrome中， li项之间的间隙b / w和ul周围的红色边框。

 * { padding: 0; margin: 0; } ul { list-style-position: inside; border: 1px solid red; } .box { padding: 10px; border: 1px solid black; } .nobullet { list-style-type: none; } 

 <div class="box"> <div><strong>Library Stats</strong></div> <ul class="nobullet"> <li>line 1</li> <li>line 2</li> <li>line 3</li> <li>line 4</li> <li>line 5</li> </ul> </div> 

Answer 1

不只是Firefox。 更正确的方法是删除填充：

 ul { list-style-type: none; padding: 0; } 

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> 

更新：

阅读您的代码，我发现了重点。 您在此处设置填充0：

* {
    padding: 0;
    margin: 0;
}

它会影响您的列表。 尝试不删除padding: 0 ，您将看不到list-style-position解决您的问题。

Answer 2

得到它了！

我一直在使用Firefox 29.0.1。 这向我展示了这一点：

现在，我更新到最新的Firefox 35.0.1。 它向我展示了这一点：

如果我可以称它为Firefox的修复程序，那么肯定是早期版本中的错误。