IE中的CSS宽度有所不同吗？

Question

所以我有一个标准的960宽度网站，里面的内容是，我设置了300个宽度的盒子，每边有10个边距，所以它们会漂浮3个。它在FF和Chrome中看起来很好，但为什么在IE中第3个盒子总是跳到下一行然后甩掉位置。它就像IE读取宽度不同于任何其他浏览器。太烦人了，有什么方法可以解决这个问题吗？

Answer 1

您必须在开始之前重置所有元素（ CSS重置）

示例： http://necolas.github.io/normalize.css/

为什么？ ： CSS reset - What exactly does it do?

Answer 2

正如l2aelba所说，你需要重置你的元素。问题是每个浏览器都有自己的各种元素的默认值。所以IE可能会添加其他人没有填充的填充，使你的元素太大而不适合它们，所以它们会缠绕。

重置会使每个浏览器尽可能相似地显示内容。

如果没有看到您的HTML和CSS，就无法确定您的问题属性是什么。

<强>解决方案：

你的问题就在这一行：

max-width: 68.571428571rem;

这是你的css的1967年。它覆盖了你的960宽度，因为它实际上小于960px，因为它排在第二位。甚至不确定你为什么在那里......

Answer 3

查看您的网站后，您的样式表中就有这种风格

.site {
    margin: 0 auto;
    max-width: 960px;
    max-width: 68.571428571rem;
    overflow: hidden;
}

要注意em，因为它在不同的浏览器中的计算方式不同，在IE中计算到大约955.4px，这就是你得到包装的原因。

将样式更改为

.site {
    margin: 0 auto;
    max-width: 960px;
    overflow: hidden;
}

你应该没事。