css - 无法使用 CSS 设置文本区域宽度

Question

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

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

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

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

有什么解决方法吗？

更新:感谢您提供目前为止的信息。我现在确保两个元素的填充/边距/边框设置相同。我仍然有问题。我发布的原始 CSS 被简化了......我还将文本区域的高度设置为 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/