与IE9相比,Firefox似乎在大多数元素的顶部增加了3px

Question

另一个"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开发必须这么烦人？:)

PS:在评论我使用内联样式之前,请注意我的项目需要它.:)

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

不能真的要求更好的东西,因为很容易指出.;)

Answer 1

我认为它来自边界,firefox不会计入元素的全局高度,与IE相反,将边界整合到elem高度......

因此,它们之间的差异应该是3px,因为最后一个border-bottom不会影响其余部分.

编辑

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

Answer 2

问题

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

解决方案

• 重置 CSS：如果您确实想要获得完全相同的渲染效果，可以使用一种称为“重置 CSS”的技术，该技术将所有有意义的内容设置为零。然后由您选择您想要的值。您可以尝试Eric Meyers 的重置 CSS或其他方法。
• 基本样式表：重置 CSS 可能会对您的样式产生意想不到的影响：效果可能令人惊讶，并且浏览器为元素设置默认值是有原因的。如果您只想纠正“了解不兼容性问题”，那么您可以使用简单的基本样式表（该样式表存在于紧凑模式和完整模式中）。

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