css - 如何强制 Firefox 呈现与 div 中相同的文本区域填充？

Question

我试图在 IE8、Firefox 和 Safari 中为文本区域内的每行像素提供一致的宽度，以便文本内容尽可能以可预测和一致的方式换行。

Firefox 正在做一些有点奇怪的事情:与其他两个浏览器相比，它有一个额外的填充像素占用了 textarea 的内容空间，并且与一个类似装备的 div block 相比。

当将此类应用于文本区域和 div 时，差异是可见的，div 中的文本触及红色背景的外左边缘，但文本区域中的文本具有 1 px 类似填充的偏移量，尽管填充为零:

.testbox{
    padding:0;
    margin:0;
    border:0;
    background: red;
    width: 40px;
    height: 40px;
    font-size: 12px;
    line-height: 16px;
}

填充的其他值最终会显示一个额外的像素偏移量与一个 div。

关于是否有办法欺骗 Firefox 将文本区域渲染成 div，或者调整文本区域的这种 not-padding-but-looks-like-padding 属性，有什么想法吗？

Answer 1

我最近一直在研究 OP 为 a similar question on SO 描述的问题. Firefox 中的一个错误似乎导致在 textarea 元素上呈现这种所谓的“not-padding-but-looks-like-padding”。

通常这种额外的填充并不是真正的问题，但是当您希望保持两个元素的宽度相同，并且您关心让其内容在两个元素中以相同的方式包装时，它就会成为一个问题。

让 textarea 包装内容，例如Firefox 中的 div 元素

似乎不可能在 Firefox 的 textarea 上去掉这个 1.5px 宽的填充，所以如果你想确保内容包裹在 div 在 Firefox 中的行为与在 Firefox 中 textarea 中的内容包装完全相同，最好的方法似乎是添加一个额外的 1.5px div 中左右两侧的填充，但仅限于 Firefox。您可以通过在您的 div 上设置以下供应商特定的前缀 CSS 属性来完成此操作:

-moz-box-sizing: border-box;
-moz-padding-end: 1.5px; 
-moz-padding-start: 1.5px; 

第一个保证div上设置的padding不会增加div的宽度，后面两个保证1.5px 的内边距将设置在 div 的右侧和左侧。

这种方法不会影响 div 在任何其他浏览器中的呈现，它不需要，因为 textarea 在其他浏览器中不会不渲染任何额外的填充。但它确保在 Firefox 中 div 和 textarea 之间没有内容包装差异，只要它们共享相同的 font-family 和 font-size 属性等等。

这是一个 jsFiddle 用于演示目的。

让 textarea 在浏览器中一致地包装内容

如果您只想确保 Firefox 中的 textarea 与其他浏览器中的 textarea 具有相同的宽度和环绕行为，您可以设置其 box -sizing 为border-box，在5.5px 两边添加一个padding 并设置-moz-padding -end 和 -moz-padding-start 到 0px。

textarea {
    padding: 0 5.5px 0 5.5px;
    -moz-padding-end: 0px;
    -moz-padding-start: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这是一个 jsFiddle 展示了这种方法。