不同浏览器中块（div）的不同高度（和宽度？）答案

【问题标题】：Different height (and width?) of blocks (divs) in different browsers不同浏览器中块（div）的不同高度（和宽度？）
【发布时间】：2012-09-18 02:22:07
【问题描述】：

我的问题照片：

首先（从左到右）是谷歌浏览器。其次是歌剧。在所有其他浏览器中，尺寸与 Opera 相同。其他网站显示相同。

"Reset CSS" from "Yahoo"。我的其他网站也一样。它们似乎在除 Google Chrome 之外的其他浏览器中按比例减少（但问题不在 Chrome 中，因为其他网站（不是我的）在所有这些浏览器中看起来完全相同）。

如果我的问题很愚蠢，我很抱歉，但我真的不明白如何解决这个问题。

.wrapper {
  width: 960px;
  margin: 0 auto;
}

.header {
  width: 100%;
  min-width: 960px;
  height: 300px;
  background: #fff;
}

【问题讨论】：

能否提供演示链接？

标签： css

【解决方案1】：

这可能存在一些问题，坦率地说，您在这里没有足够的资源让我们为您提供这么多的帮助。以下是一些需要检查的常规事项：

确保 Chrome 没有放大。如果您仔细观察，您会发现 Chrome 中的所有内容都稍大一些。 Ctrl+0 应该确保它不会被意外放大。
确保它不是 Chrome 已知的东西。我看到有人提到 Chrome 会渲染一些更大的东西，这可能是一个不错的起点。不排除 Chrome 不傻的可能性，只是因为你在其他网站上看不到它。它们在 IE 6-8 中也可能看起来相同，但是如果您以这种方式获取这些站点所需的所有障碍，您可能会发现体验非常糟糕。并不是说 Chrome 的行为不需要任何限制。
使用 Chrome 的开发人员工具确保您期望的值是实际正在使用的值。仅仅因为您认为它应该是 300 像素高，并且文本是 20px，这并不意味着它实际上是并且没有一些奇怪的继承故障（或者 CSS 没有正确加载）。

另外，浏览器稍有不同也没关系。我理解，如果你的老板对此嗤之以鼻，你无能为力。但是，在尝试对此类问题进行故障排除时，甚至在做出设计决策时，请牢记这一事实。有时，这比花费无数小时（在商业环境中等同于大量金钱）而没有真正的回报要好。想一想 - 有多少用户实际上会同时拥有两个浏览器并进行逐个像素的比较，或者以其他方式注意到这种差异（地狱，就此而言，你有多少用户甚至知道什么是浏览器）？

【讨论】：