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匹配。

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

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

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

Answer 2

为每个字段创建一个ID，然后使用CSS将display设置为inline-block，将width设置为您想要的任何内容。

我还建议为字段添加<label>元素。我相信这会为您提供浏览器支持的工具提示，以及更好的屏幕阅读器可用性。

输入文本/ textarea大小

2 个答案: