项目符号列表项是否总是缩进 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 完成这项工作。为什么每个浏览器都会将项目符号项目缩进这么远？我在互联网上搜索了这个主题，但没有发现任何有用的信息。我可以确定这适用于未来的浏览器吗？ HTML 标准中是否指定了 1.8em？

预先感谢您的任何提示！

编辑：

到DisgruntledGoat的答案：如果我使用1em/-1em或20px，它将不起作用/-20 像素。使用这种样式：

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

我得到不同字体大小的结果（显然不随字体大小缩放）：

类似地， 1em/-1em 也关闭，看起来如上图右侧所示，但随字体大小缩放。由于某种原因，1.8em 看起来仍然是神奇的距离......

Answer 1

根据您的代码，您已经设置了 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 2

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

Answer 3

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

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

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

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

Answer 4

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

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

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