【问题标题】：It appears Firefox adds 3px to the top of most elements, compared to IE9与 IE9 相比，Firefox 似乎在大多数元素的顶部添加了 3px
【发布时间】：2011-07-26 20:41:39
【问题描述】：

又一个“Firefox 不支持 IE9”和其他问题。

我可以解释发生了什么，但一张图片说了一千多个单词，所以我截取了 FF 和 IE 的屏幕截图：

这里是标记：

<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9500; border-radius: 4px; width: 400px; height: 161px;"> 
   <span style="color: #2C2C2C; font-family: Arial; font-size: 20px; text-align: center;" /> 
   <font size="24">Look!</font>
   <br>
   See how different IE renders from FF?
   <br>
   How can I fix this?
   </span>
   <br>
   <input value="CODE" type="text" size="20" style="font: 20px Arial; color: #000000; background-color: #F3F3F3; border: 1px solid #8D8D8D; width: 300px; border-radius: 2px; text-align: center; margin-top: 0px; padding: 5px 3px 5px 3px; " />
   <br>
   <input type="button" value="I'm a button!" />
</div>

是什么原因造成的？我用 Firebug 尝试了几种不同的方法，但都无济于事。

为什么 Web 开发必须如此烦人？ :)

P.S：在评论我对内联样式的使用之前，请注意这是我的项目需要它的方式。 :)

编辑：按照 Cygal 和 Christophe 的建议，通过使用 CSS 重置，并将其仅应用于我的对象，结果如下：

正如 easwee 很好地指出的那样，真的不能要求任何更好的东西。 ;)

【问题讨论】：

现在没有时间在两者上进行测试，但是您是否尝试为 div 设置填充？如果没有定义，也许两个浏览器之一会添加自己的“标准”
缩小后有什么变化吗？
您是否尝试过使用 Firebug（在 Firefox 中）和开发者工具（在 IE9 中）来更深入地了解布局？
@Semyazas - 我尝试使用 padding: 0px;然而这并没有改变什么。正如你在图片中看到的，你走的越久，情况就越糟
@Richard - 我正在使用 Firebug，是的。

标签： html css firefox cross-browser

【解决方案1】：

我认为它来自边框，Firefox 不计入元素的全局高度，而 IE 将边框集成到 elem 高度中......

因此，它们之间的差异应该是 3px，因为最后一个边框底部不会影响其余部分。

编辑

您是否尝试过使用 CSS 重置，例如：http://meyerweb.com/eric/tools/css/reset/

【讨论】：

CSS 重置成功，两个浏览器的布局看起来一样！（并不是说它看起来特别漂亮，但这就是我进来的地方：P）

【解决方案2】：

问题

没有关于默认元素的默认边距、内边距、边框和字体大小的规范。在这里，您的标题在 Firefox 中的边距似乎比在 IE9 中更大。请注意，仅解决此特定问题的每个解决方案不会阻止它出现在其他地方。

解决办法

重置 CSS：如果您确实希望获得完全相同的渲染效果，您可以使用一种称为“重置 CSS”的技术，它将所有有意义的地方都设置为零。然后由您选择所需的值。你可以试试Eric Meyers's reset CSS 或other ones。
基本样式表：重置 CSS 可能并且将会对您的样式产生意想不到的影响：效果可能令人惊讶，并且浏览器具有元素的默认值是有原因的。如果您只想更正“已知不兼容问题”，那么您可以使用simple base stylesheet（这个在紧凑模式和完整模式中都存在）。

但是，请记住，如果每个网站在每个浏览器上的显示不一样也没关系，并且由于您无法控制的问题（主要是由于用户和旧浏览器选择的字体大小）。另一个解决方案是放手并使用 em 中的尺寸等技术。（而不是像素）在适当的时候。 :)

【讨论】：

+1 解释得很好。而且我真的认为一个人在使用可以追溯到一战的标记时，没有权利成为完美主义者并要求像素完美的设计。
通过使用重置 CSS，它接近像素完美。 @easwee - 我当然不希望你指的是我，先生。 ;)

【解决方案3】：

尝试在 body 标记上指定边距，这应该可以让您准确地为所有浏览器指定页面正文上所需的边距

<body style="margin: 0px">

【讨论】：

【解决方案4】：

什么样的系统需要内联样式？它是否也“需要”font 元素？（顺便说一句，没有“24”这样的大小。有效值为 1 到 6。）。
为什么用户会关心渲染在一个浏览器中会偏离几个像素？他们不会真的比较它，然后因为它而关闭该网站。
您的第一个 span 标记是 XHTML 自封闭 (<span ... />)。 IE 不仅不支持，而且在这种情况下完全是错误的。
文档是否处于标准模式？

【讨论】：

Mine 可以 - 所有内容都是使用我的 Windows 应用程序动态生成的，代码用于预览设计。另外，感谢您通知我 Span 标记中的 /> - 没看到 :)
是的，存在一个元标记，指定 IE9 标准模式

【解决方案5】：

-moz-box-sizing:border-box

应该解决你的问题，尽管你的 html 很残酷。

<div align="center" id="cmContainer" style="background-color: #8CFE70; border: 1px solid #2D9500; border-radius: 4px; width: 400px;-moz-box-sizing:border-box;"> 
   <span style="color: #2C2C2C; font-family: Arial; font-size: 20px; text-align: center;"> 
   <font size="24">Look!</font>
   <br>
   See how different IE renders from FF?
   <br>
   How can I fix this?
   </span>
   <br>
   <input value="CODE" type="text" size="20" style="font: 20px Arial; color: #000000; background-color: #F3F3F3; border: 1px solid #8D8D8D; width: 300px; border-radius: 2px; text-align: center; margin-top: 0px; padding: 5px 3px 5px 3px; " />
   <br>
   <input type="button" value="I'm a button!" />
</div>

【讨论】：

不，它没有解决它。我知道 HTML 很烂，但它只是用于在我的 Windows 应用程序中预览