输入宽度与文本区域宽度答案

【问题标题】：input width vs textarea width输入宽度与文本区域宽度
【发布时间】：2016-09-09 02:57:19
【问题描述】：

我很清楚我们不应该使用 size 属性而是 css 样式。

对于 input[text] 和 textarea 显示完全相同宽度的跨浏览器 css 是什么？

BTB，我试过了

#idInputText, #idTextArea {
font: inherit;
width: 60ex;

}

正确吗？有更好的解决方案吗？

提前感谢您的帮助。

【问题讨论】：

标签： html css

【解决方案1】：

通过首先应用 CSS 重置，您可能会在不同的浏览器上获得更一致的结果。本文列出了一些很好的例子：

https://stackoverflow.com/questions/116754/best-css-reset

一旦您消除了浏览器在填充和边距方面的细微差别，您的 60ex 主宽度应该允许输入对齐。

【讨论】：

遗憾的是，这个问题被删除了，但是这个链接到 www.css-reset.com，它为我们需要它们的可怜的 n00bs 提供了一些关于 CSS 重置（令人震惊）的有用信息；）。 link

【解决方案2】：

文本输入元素的本机填充不同。您需要为 input 元素和 textarea 元素分配不同的宽度并进行实验。

#form input.textfield { width:10em; }
#form textarea { width:9em; }

只需抛出一些默认样式（我更喜欢 ems ）并打开 Firebug 并通过更改大小值进行试验。

我通常在<input type=text> 上抛出一个class=textfield，所以我不会定位<input type=submit> 或类似的。

【讨论】：

请注意，您也可以定位 input[type="text"]，以避免设置提交按钮的样式（尽管它不适用于 IE6）。

【解决方案3】：

我会避免通用的 CSS 重置，但使用类似这样的东西：

input[type="text"], input[type="password"], textarea {
    width: 60ex;
    margin: 0;
    padding: 2px; /* it's best to have a little padding */
    border: 1px solid #ccc; /* gets around varying border styles */
    border-radius: 4px /* optional; for newer browsers */
}

只要您处于标准模式而不是 quirks 模式，这对大多数浏览器都应该可以正常工作。

注意事项：

属性选择器 - [type="text"] - 在 IE6 中不起作用，因此您可能希望选择类名。
您不能让所有浏览器都以完全相同的方式显示表单字段。
使用 ex 作为单位虽然是个好主意，但在固定像素宽度的环境中可能效果不佳。

【讨论】：

【解决方案4】：

使用像素而不是 EM 或 pct 值。 60px = 60px 在所有浏览器中，无论基本字体大小如何。

【讨论】：

【解决方案5】：

我参加这个聚会迟到了，但万一有人遇到这种情况并需要使用前任作为宽度，我终于让它工作了。

Textareas 默认使用等宽字体作为其字体系列。所以，你需要覆盖它。这个 css 对我有用：

input[type="text"], textarea {
  font-family: Arial, sans-serif;
  border: 2px groove;
  padding: 2px;
  margin: 10px;
  width: 35ex;
}

这里有一个 Fiddle 来演示：https://jsfiddle.net/Lxahau9c/

【讨论】：

【解决方案6】：

左右填充0px

【讨论】：

请为您的回答提供更多背景信息。