css - 浏览器之间的 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 的一个或任何其他人。有几个。

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

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

Answer 3

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

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