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设置宽度并且遇到这篇文章（因为我只是所做的那样）。确保字体大小相同，

e.g。

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

否则textarea可能是不同的大小（FF12为真）。

Answer 3

尝试边框：0;或边框：1px solid＃000;

Answer 4

这可能是由<input>和<textarea>元素的不同默认边距引起的。尝试使用这样的东西。

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

Answer 5

我也在努力解决这类问题，这个问题是我谷歌搜索的第一个结果。最终对我有用的是为textarea设置box-sizing: content-box - Drupal 7默认为border-box，这会导致填充和边框宽度从textarea的大小中减去。

Answer 6

也许您在浏览器的某个位置定义了用户特定的css覆盖，因为我刚测试它并且按预期工作：http://jsbin.com/exase/edit （在Windows上测试。也许Apple原生小部件有一些怪癖？）

Answer 7

设置宽度100％，然后使用max-width：

     textarea { 
          width:100%;
          max-width:250px;
     }

//删除了边距和填充，如果需要，可以添加它。

Answer 8

你可以使用：

input[type="text"], textarea { 
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

无法使用CSS设置textarea宽度

8 个答案: