css - 不同浏览器中 block (div) 的不同高度(和宽度？)

Question

我的问题的照片:

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

"Reset CSS" from "Yahoo" .与我的其他网站一样。它们似乎在 Google Chrome 以外的其他浏览器中按比例减少(但问题不在 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 的行为符合预期并不需要任何帮助。

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

此外，浏览器略有不同也没关系。我知道，如果你的老板对你的要求不高，你也无能为力。但是，在尝试解决此类问题时，甚至在做出设计决策时，请牢记这一事实。有时，这比花费无数小时(在业务情况下相当于大量金钱)却没有真正的返回要好。想一想 - 有多少用户实际上并排使用两个浏览器并进行逐像素比较，或者以其他方式注意到此类差异(见鬼，就此而言，您的用户中有多少人甚至知道什么是浏览器)吗？