html - 与 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 开发必须如此烦人？ :)

P.S:在评论我对内联样式的使用之前，请注意这是我的元素所需要的。 :)

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

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

Answer 1

我认为是border的缘故，firefox不计入元素的全局高度，反对IE把border整合到elem高度...

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

编辑

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