Html 输入宽度与文本区域宽度

看完线程后

我很清楚，我们不应该使用大小属性，而是css样式

输入[text]和文本区域显示完全相同宽度的跨浏览器css是什么

顺便说一句，我试过了

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

}

对吗？有更好的解决办法吗

---

提前感谢您的帮助。

文本输入元素的本机填充不同。您需要为输入元素和textarea元素指定不同的宽度，然后进行实验

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

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

---

我通常在

上抛出一个

class=textfield

，因此我不针对

或类似的对象。

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

---

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

我会避免通用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作为单元虽然是个好主意，但在固定像素宽度的环境中可能无法正常工作

---

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

左右填充0px

我来晚了，但万一有人遇到这种情况，需要使用ex的宽度，我终于让它工作了

默认情况下，文本区域的字体系列使用monospace。所以，你需要覆盖它。这个css对我有用：

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

---

这里有一把小提琴来演示：

请为您的答案提供更多的上下文。遗憾的是，该问题已被删除，但此链接指向www.css-reset.com，其中有一些关于css重置的有用信息（令人震惊），供我们需要css重置的可怜的N00B使用；）。请注意，您也可以针对

输入[type=“text”]

，以避免设置提交按钮的样式（尽管它不适用于IE6）。