我试图使用这个CSS来设置我的表单元素的宽度:
input[type="text"],textarea { width:250px; }
如果你看看这个Firefox截图,你会看到字段的宽度不一样。我在Safari中得到类似的效果。
alt text http://screamingv.com/ss.png
有任何解决方法吗?
更新:感谢您的信息到目前为止。我现在确保padding / margin / border两个元素设置相同。我还是有问题。我发布的原始CSS简化…我也设置textarea的高度为200px。当我删除高度样式,宽度匹配。奇怪的。这是没有意义的。
浏览器错误?
解决方法
尝试删除填充和边框。或者尝试使这两个元素相同
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/