输入文本/ textarea大小

Question

形成:

<form id="defineForm" method="POST" action="api/test">
  <fieldset>
    <legend>Generale</legend>
        <input type="text" name="id" size="60" maxlength="60"/>
        <input type="text" name="descr" size="60"/>
        <textarea name="longDescr" cols="62" rows="10"></textarea>

使用cols="62"了"longDescr",并size="60"为"ID"产生的区域相同的宽度在IE8(哦惊喜!!!):

   [ text       ] 
   [ text       ]
   [ textarea   ]
   [            ]

当然这些值会在Firefox上产生另一个结果(两个不同的宽度,如我所料),类似于:

   [ text       ] 
   [ text       ]
   [ textarea      ]
   [               ]

我如何强制输入文本和textareas的相同宽度,至少在IE7/8和Firefox上？

编辑

我正在使用这个CSS:

input, textarea {
    margin: 15px;
    padding: 3px;
    display: block;
    width: 20ex;
}

但它不适用于Firefox

Answer 1

使用CSS width样式为它们提供实际单位的物理宽度:

#id, #longDescr {
    width: 60ex;
}

你需要给它们每个id属性以匹配它们name之前的s.

除非你给它们一个像素宽度,否则你还需要确保它们使用相同的字体,默认情况下它们不会在许多浏览器上使用.最简单的方法是这样的:

#id, #longDescr {
    font: inherit;
    width: 60ex;
}

这将使它们使用与页面其余部分相同的字体,但显然您可能希望指定要使用的确切字体.