项目符号列表项是否总是精确缩进 1.8em？

Question

我制作了一个纯 CSS 的下拉菜单。要求是有一个水平条的项目，每个项目可以下拉一个垂直菜单。此外，这些项目不应删除三级菜单，而应仅显示项目符号列表。我的 html 有三个嵌套的ul，并且菜单在所有现代浏览器中都能完美运行。它看起来像这样：

但是，我不喜欢链接后面的较暗框从项目符号右侧开始并且没有延伸到整个菜单宽度，所以我玩了一会儿，最后做出了这个调整：

#nav li ul li ul li a {
    padding-left:1.8em;
    margin-left:-1.8em;
}

现在项目符号菜单项看起来就像我想要的那样：

并且由于em 蜜蜂相对于字体大小的性质，它的工作方式独立于字体大小，如此处显示的较大字体大小：

我在 Internet Explorer 8+9+10（开发者预览版）、Firefox 3+7、最新的 Chrome、Opera 和 Safari 上对此进行了测试，效果非常好。

但是，我只是不明白为什么正是 1.8em 来完成这项工作。为什么每个浏览器都将项目符号项缩进这么远？我在互联网上搜索了这个主题，但没有发现任何有用的东西。我可以确定这适用于未来的浏览器吗？那些 1.8em 是在 HTML 标准中指定的吗？

提前感谢您的任何提示！

编辑：

致DisgruntledGoat's 回答：如果我使用1em/-1em 或20px/-20px 将不起作用。使用这种风格：

#nav li ul li ul li a {
    padding-left:20px;
    margin-left:-20px;
}

对于不同的字体大小，我得到了这个（显然不是随字体大小缩放）结果：

同样，1em/-1em 也是关闭的，看起来像上图中的右侧，但会随着字体大小缩放。出于某种原因，它仍然看起来像 1.8em 是魔法距离......

Answer 1

基于多年不一致的浏览器 - 我会说你不能相信它们永远是一致的。最好的选择是自己强行控制。

您可以通过同时设置 li 的 padding-left 和 margin-left 来使用它。例如：

li {
  margin-left: 1.8em;
  padding-left: 0;      
}

显然，一些（主要是较旧的）浏览器使用填充和一些边距 - 所以一定要同时设置。

Answer 2

根据您的代码，您已将ul 设置为没有边距或填充。但是，您已经设置了 li，这样他们就有了 margin-left: 1.8em：

#nav li ul li ul li {
    display: list-item;
    margin-left:1.8em;
    list-style:disc outside none;
}

#nav li ul li ul li {
    margin-left: 1.8em;
    padding-left: 0;
}

它就在那里。

Answer 3

您绝对应该进行 CSS 重置，然后按照您需要的方式设置属性。永远不要相信浏览器是一致的。它增加了一些编码，但同时为您的代码提供了未来证明。

Answer 4

回答问题和您的评论：您的解决方案有效，因为您否定了具有完全相同大小边距的填充。但是列表左侧的间距随着字号的增大而变大。使用 1em 填充和 -1em 边距或 20px 和 -20px 时，您会得到相同的结果。

正如我在评论中提到的，列表的实际默认填充是 40 像素。更令人困惑的是，在检查用户代理样式表（在 Chrome Dev Tool 和 Firebug for Firefox 中）时，它们会分别报告独特的 CSS 属性：-webkit-padding-start 或 -moz-padding-start。

我假设这些特殊属性用于代替常规填充，因为列表是 HTML 中的一种特殊情况 - 它们具有不计入填充的悬挂项目符号/数字。