跨浏览器与边距的不一致？

Question

对于textarea和边距，我遇到了x-browser兼容性（Chrome和FF）的小问题。

相关网页位于：http://www.mylesgray.com/contact/

你可以看到“消息”下的textarea在FF中与Chrome不同：

FF 11：

Chrome 17：

你可以看看你是否完美地看到两个Chrome系列的底部和右边缘，但是FF似乎在两个方向上都是进一步的，我无法解决为什么在Firebug或Chrome Dev Tools中。

似乎是一个webkit与gecko问题，因为Espresso显示与Chrome相同。

以上的CSS是：

.wpcf7-message {
    float: left;
    width: 26em;
    height: 12.3em;
    margin: 0;
}

.wpcf7-message textarea {
    resize: none;
    padding: 1em;
    width: 100%;
    height: 100%;
    margin-top: 1.1em;
    border: none;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

非常感谢任何帮助！

迈尔斯

Answer 1

对于宽度，边距和填充，您最常使用的em单位。 em单位基于字体大小，webkit呈现的字体与gecko略有不同（webkit和gecko中的文本宽度不同）。

作为测试，将CSS宽度，填充和边距更改为绝对px值，并检查这是否修复了不一致性。

Answer 2

我会说

使用blueprint css framework，这将帮助您解决这些类型的跨浏览器问题并节省大量时间

它带有IE固定文件，

<!--[if lt IE 8]>
 <link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<!--[if lt IE 9]>
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->