跨浏览器与边距不一致？答案

【问题标题】：Cross browser inconsistencies with margins?跨浏览器与边距不一致？
【发布时间】：2012-02-29 00:38:36
【问题描述】：

我在文本区域和边距的 x 浏览器兼容性（Chrome 和 FF）方面遇到了一个小问题。

有问题的页面在这里：http://www.mylesgray.com/contact/

如您所见，“消息”下的 textarea 在 FF 中与在 Chrome 中不同：

FF 11：

Chrome 17：

您可以看到两个 Chrome 的底部和右侧边缘是否完美对齐，但 FF 似乎在两个方向上都更远，我无法在 Firebug 或 Chrome 开发工具中找出原因。

这似乎是 webkit 与壁虎的问题，因为 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;
}

非常感谢任何帮助！

迈尔斯

【问题讨论】：

你可以在 textarea 上尝试 box-sizing:border-box。我不确定它是否会起作用，但值得一试。
我的猜测是您在任何地方都在使用em 单位。 Webkit 呈现文本的方式与 gecko 略有不同（相同的文本在两种浏览器中的宽度不同）。作为测试，将所有的内边距、边距和宽度设置为绝对值，看看不一致是否仍然存在。
肯定都是关系型的吧？我已经尝试过了，是的，它工作得很好，但是混合像 em 和 px 这样的单位让我觉得很脏，使用像 px 这样的绝对值会让我觉得很脏。有什么办法可以用 em 实现这一目标吗？ - 我猜不是？
@Pat 如果你创建了一个答案，我会投票赞成并将你的答案标记为答案，因为它最接近它的工作原理。

标签： html css webkit textarea gecko

【解决方案1】：

很可能是您在各处使用的em 单位来表示宽度、边距和内边距。 em 单位基于字体大小，webkit 呈现字体的方式与 gecko 略有不同（webkit 和 gecko 中的相同文本将具有不同的宽度）。

作为测试，将您的 CSS 宽度、内边距和边距更改为绝对 px 值并检查这是否可以解决不一致问题。

【讨论】：

【解决方案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]-->

【讨论】：

已经在使用 Eric Mayer 的 CSS 重置 - 不需要任何框架。不过还是谢谢。