Question

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

对于输入[text]和textarea，交叉浏览器css显示完全相同的宽度是什么？

BTB，我试过了

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

}

这是对的吗？更好的解决方案？

提前感谢您的帮助。

Answer 1

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

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

一旦消除了填充和边距上的微妙浏览器差异，那么60ex的主宽度应该允许输入排列。

Answer 2

文本输入元素的原生填充不同。您需要为输入元素和textarea元素指定不同的宽度并进行实验。

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

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

我通常会在class=textfield上投放<input type=text>，因此我不会定位<input type=submit>或类似内容。

Answer 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 */
}

只要你处于标准模式而不是怪癖模式，这对大多数浏览器都适用。

注意：

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

Answer 4

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

Answer 5

我参加这个派对的时间已经很晚了，但是如果有人遇到这个并且需要使用ex的宽度，我终于可以开始工作了。

Textareas默认使用monospace作为其font-family。所以，你需要覆盖它。这个CSS对我有用：

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

这是一个小提琴演示：https://jsfiddle.net/Lxahau9c/

Answer 6

左右填充0px

输入宽度与textarea宽度

6 个答案: