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

Question

我的问题照片：

  

首先（从左到右）是Google Chrome。第二是歌剧。在Opera中的所有其他浏览器维度中。其他网站平等显示。

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

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

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

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

Answer 1

这可能会有一些问题，你坦率地说我们没有足够的帮助你。以下是一些要检查的一般事项：

1. 确保Chrome未放大。如果仔细观察，您会发现Chrome中的所有内容都略大一些。 Ctrl + 0应确保不会意外放大。

2. 确保Chrome不是一个众所周知的东西。我看到提及Chrome渲染的东西有点大，这可能是一个很好的起点。不要排除Chrome不是傻瓜的可能性，只是因为你没有在其他网站上看到它。它们在IE 6-8中也可能看起来相同，但是如果你拿出了那些以这种方式获得这些网站所需的所有环节，你可能会发现一种非常破碎的体验。毫无疑问，Chrome没有任何必要条件让Chrome按预期运行。

3. 使用Chrome的开发者工具确保您期望的值是实际正在使用的值。只是因为您认为它应该是300px高，并且文本是20px，它并不意味着它实际上是并且没有一些奇怪的继承故障（或者CSS没有正确加载）。

此外，浏览器可以略有不同。我知道如果你有一个老板在你的脖子上呼吸，你可以做的并不多。但是，在尝试对此类问题进行故障排除时，或者甚至在做出设计决策时，请记住这一事实。有时，它比花费无数小时（在商业情况下相当于大量资金）更好，因为没有真正的回报。考虑一下 - 有多少用户实际并排有两个浏览器并进行逐像素比较，或者注意到这些差异（地狱，就此而言，甚至有多少用户知道什么是浏览器 ）？