列表样式类型的无序列表：none； & list-style-position: inside;在 Firefox 中需要额外的 space

Question

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

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

但是如果 ul 部分要删除项目符号，我使用..

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

这在 Chrome、Opera 和 Safari 中完美运行。

但是对于 Firefox，简单的 list-style-type: none; 似乎无法正常工作。项目符号应该消失，但在 li 元素的左侧仍然存在间隙（space）。我需要向 ul.nobullet 添加额外的 list-style-position: outside; 以消除差距。

我的问题是，为什么这特别发生在 firefox 中？有什么我遗漏或做错了什么吗？

这是一个示例代码。请注意在 Firefox 和 Chrome.

中 b/w li 项目和 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 的修复，那么它肯定是早期版本中的错误。

列表样式类型的无序列表：none； & list-style-position: inside;在 Firefox 中需要额外的 space

Unordered list with list style type: none; & list-style-position: inside; takes extra space in Firefox

html

css

firefox