无法使用CSS设置textarea宽度

Question

我试图使用这个CSS来设置表单元素的宽度:

input[type="text"], textarea { width:250px; }

如果您查看此Firefox屏幕截图,您会看到字段的宽度不同.我在Safari中得到了类似的效果.

alt text http://screamingv.com/ss.png

有没有解决方法？

更新:感谢您的信息到目前为止.我现在确保两个元素上的填充/边距/边框设置相同.我还有问题.我发布的原始CSS已经简化了......我还将textarea的高度设置为200px.当我删除高度样式时,宽度匹配.奇怪的.这是没有意义的.

浏览器错误？

Answer 1

尝试删除填充和边框.或者尝试使两个元素相同

input[type="text"],
textarea {
    width:250px;
    padding: 3px;
    border: none;
    }

要么:

input[type="text"],
textarea {
    width:250px;
    padding: 0;
    border: 1px solid #ccc;
    }

INPUT和TEXTAREA元素通常有一些浏览器应用的填充(因浏览器而异),这可以使事物看起来比指定的宽度更宽.

更新:也是box-sizing: border-box;一种方便的方法来设置填充和边框将进入而不是添加的宽度.请参阅:http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

这个答案已经晚了三年,但我在这里发布它是为了防止其他人试图设置宽度em's而不是pixels这个帖子(正如我刚才所做的那样).确保字体大小相同,

例如

input, textarea {
    font-size:12px; 
    width:20em; 
    padding:0; 
    margin:0 
}

否则textarea可能是不同的大小(FF12为真).