规范化 Internet Explorer 中的 textarea 元素答案

【问题标题】：Normalize textarea element in Internet Explorer规范化 Internet Explorer 中的 textarea 元素
【发布时间】：2013-10-08 08:02:28
【问题描述】：

在所有版本的 Internet Explorer（包括版本 11 beta）中，textarea 元素比任何其他浏览器中具有相同宽度的文本区域低 1 像素或 2 像素。如何解决？

【问题讨论】：

【解决方案1】：

为了解决IE 11的布局问题（并使所有浏览器的布局外观看起来99%相似），建议使用CSS Reset。

将 CSS 重置脚本复制并粘贴到 http://cssreset.com

【讨论】：

【解决方案2】：

只看 Chrome 和 IE，它们设置的默认 height 和 margin 属性略有不同，而 textarea 则没有样式。为了获得跨浏览器的一致性，最好的办法是像这样明确所有框模型属性（随机选择的值，但你明白了）：

texarea {
    width: 400px;
    height: 100px;
    padding: 0;
    border: 1px solid #999;
    margin: 0;
}

希望这会有所帮助。

【讨论】：

感谢您的替换，但是...看到这个小提琴：jsfiddle.net/HXeTu/1 在 IE 中是 1px 或 2px 小（宽度）。
@user2857661，您的小提琴没有设置height，这是答案中的关键。并且宽度是相同的 - 请在提及尺寸时明确您所指的内容。
看起来 Chrome 正在将宽度、填充等四舍五入为整数值，但 IE 不是，这就是 1px 或 2px 差异的来源。
我已经将你的小提琴分叉为使用box-sizing:border-box，所以我们可以将 textarea 宽度设置为 100%，这应该更接近：jsfiddle.net/NkvMp/1
border-box 也有同样的问题，只有在 mozilla firefox 下才会反转！（是的，我添加了 -moz-box-sizing:border-box;）

【解决方案3】：

在textarea 元素上设置height，并在其上设置display: block（使height 适用）。示例（您当然应该在现实生活中使用外部样式表）：

<textarea rows=10 style=
"display: block; height: 12em; line-height: 1.2; font-size: 90%; margin: 0">

使用等于1.2em 乘以行数的height 值似乎可以正常工作。对于您通常要在textarea 中使用的字体，它应该足够了。剩下的就是处理浏览器默认值的差异。

说明：如果您在浏览器的开发者工具中查看textarea 元素，您可以看到填充和边框值相同，但内容高度不同。原因是textarea 格式是特定于浏览器的，高度计算不仅基于字体大小，还基于与浏览器相关的规则。浏览器允许您覆盖它。

您可以另外设置这些，因为它们对应于常见的浏览器默认设置，但某些浏览器可能会有所偏差（这通常不相关，但如果您针对像素精确度可能很重要）：

textarea { padding: 2px; border-width: 1px; }

【讨论】：

在我的最后一个例子是高度和显示块，结果是一样的...
@user2857661，如果您的意思是此解决方案没有帮助，请显示您尝试过的实际代码（一个独立的示例）并准确说明问题所在。最好编辑您的问题，解决 cmets 中提出的问题。