浏览器之间的CSS margin-left行为不同

Question

我在使用margin-left CSS属性时遇到了一些麻烦。我有一些嵌套的无序列表。这是列表的样子，没有更改左边距（在IE和Chrome中）：

我想减少每个列表的缩进量，所以我添加了这个CSS代码：

ul li ul
{
    margin-left: -25px;
}

这在Chrome中运行良好，显示如下：

然而，IE 8显示如下：

我猜两个浏览器之间保证金开始的起源是不同的？如何在所有浏览器中实现减少嵌套无序列表缩进的预期效果？

Answer 1

您应该查看“清零”ul和li的边距和填充，如下所示：

ul,li { margin: 0; padding: 0; }

由于不同的浏览器具有不同的默认值。从那里，您应该能够根据需要添加自己的边距和填充。

Answer 2

始终使用CSS重置是一件好事。这样可以避免浏览器之间存在差异。您可以使用像;

这样的通用重置

* {
  margin: 0;
  padding: 0;
  outline: 0;
  /* etc */
}

或者更深入一点并使用Eric Meyer's一个或anyone else。有几个。

无论如何，在您的情况下，而不是使用负边距播放，您应该重置ul和li元素的边距和填充：

ul, li {
  margin: 0;
  padding: 0;
}

Answer 3

我建议http://necolas.github.io/normalize.css/或标准的重置css样式表

不同的浏览器设置不同的默认设置。