css – 如何强制Firefox渲染textarea填充与div中相同？

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

我最近一直在研究OP为 a similar question on SO描述的问题.似乎Firefox中的一个错误导致在textarea元素上渲染这种所谓的“不填充但看起来像填充”.

通常这个额外的填充并不是一个真正的问题,但是当你想要保持两个元素的宽度相同时,它会成为一个问题,而你关心的是让它的内容在两个元素中以相同的方式包装.

获取textarea以包装内容与例如Firefox中的div元素

似乎不可能在Firefox中删除textarea上的这个1.5px宽的填充,所以如果你想确保Firefox中div内的包装内容与Firefox中textarea内部包装的内容完全相同,最佳方法似乎是在div中的右侧和左侧添加额外的1.5px填充,但仅限于Firefox.您可以通过在div上设置以下特定于供应商的前缀CSS属性来实现此目的：

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

第一个确保div上的填充设置不会增加div的宽度,接下来的两个确保在div的右侧和左侧设置1.5px的填充.

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

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

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

如果您只想确保Firefox中的textarea与其他浏览器中的textarea具有相同的宽度和包装行为,可以将其box-sizing设置为border-box,在5.5px的两边添加一个填充并设置-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.