我试图在IE8,Firefox和Safari中的textarea内部以像素为单位提供一致的宽度,以便文本内容尽可能地以可预测和一致的方式包装行.
Firefox正在做一些有点奇怪的事情：它在textarea的内容空间与其他两个浏览器之间有一个额外的填充像素,与一个类似装备的div块相比.
将此类应用于textarea和div时,差异是可见的,div中的文本触及红色背景的左外边缘,但textarea中的文本尽管填充为零,仍具有1 px填充式偏移：
.testBox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
填充的其他值最终显示一个额外的偏移像素与div.
关于是否有办法欺骗Firefox渲染textarea就好像它是一个div,或者为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;
}
