internet-explorer - 输入文本/文本区域大小

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>

对“longDescr”使用 cols="62" 对“id”使用 size="60" 产生相同宽度的区域(哦!哦!惊喜!)在 IE8 上:

   [ text       ]    [ text       ]   [ textarea   ]   [            ]

Of course these values proceduces another result on Firefox (two different width as I expect), something like:

   [ text       ]    [ text       ]   [ textarea      ]   [               ]

How can I force the same width, at least on IE7/8 and Firefox, of input text and textareas?

EDIT

I'm using this CSS:

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

但它不适用于 firefox

Answer 1

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

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

您需要为他们每个人提供一个 id 属性以匹配他们的 name 才能生效。

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

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

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