项目符号列表项始终缩进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的填充左侧和左侧边距来使用它。例如：

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

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

Answer 2

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

Answer 3

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

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

正如我在评论中提到的，列表的实际默认填充是40px。为了让事情更加混乱，在检查用户代理样式表时（在Chrome Dev Tool和Firebug for Firefox中），他们分别报告了独特的CSS属性：-webkit-padding-start或-moz-padding-start。

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