无法使用 CSS 设置文本区域宽度答案

【问题标题】：Unable to set textarea width with CSS无法使用 CSS 设置文本区域宽度
【发布时间】：2009-02-03 23:56:30
【问题描述】：

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

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

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

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

有什么解决方法吗？

更新：到目前为止，感谢您提供的信息。我现在确保两个元素上的填充/边距/边框设置相同。我仍然遇到问题。我发布的原始 CSS 被简化了......我还将 textarea 的高度设置为 200px。当我删除高度样式时，宽度匹配。诡异的。这没有任何意义。

浏览器错误？

【问题讨论】：

发布生成示例屏幕截图的 HTML 和 CSS。
你检查过元素周围的边距吗？
祝你在保留原生 l&f 的同时对输入字段进行样式设置。如果可能，请将边框样式设置为可接受的样式。

标签： css

【解决方案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/

【讨论】：

【解决方案2】：

这个答案迟了三年，但我把它贴在这里以防万一其他人试图在em's 而不是pixels 中设置宽度并遇到这篇文章（就像我刚刚做的那样）。确保字体大小相同，

例如

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

否则文本区域的大小可能不同（FF12 上为真）。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

内边距和边距不增加宽度。

【解决方案5】：

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

【讨论】：

这是目前最面向未来的解决方案，与摆弄边距和填充相反，它的危险性也最低。我们已经超越了对浏览器的坚持，是时候遵守标准并迫使浏览器供应商效仿了。总得从某个时候开始。

【解决方案6】：

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

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

//去掉边距和内边距，你可以添加它。

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案8】：

你可以使用：

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

【讨论】：