大小属性和 CSS 宽度之间的 HTML 和 CSS 大小相关性

Question

我在页面上有一个输入字段，看起来像这样:

<input type="text" size="20" name="whatever" />

想象一下，我想保留 size 属性而不是使用 CSS，现在我想在相同宽度的相同表单中添加一个选择框:

<select name="whatever2">
  <option>an option</option>
</select>

我应该添加什么属性来让选择框匹配输入字段的宽度？

我最初想到的是“大小”，但不是——那是要显示的选项数量，第二个想法是“style="width:20em"'，但它更大...

Answer 1

来自spec :

size = cdata [CN]

This attribute tells the user agent the initial width of the control. The width is given in pixels except when type attribute has the value "text" or "password". In that case, its value refers to the (integer) number of characters.

因此，文本和密码字段的 size 表示字符数 - 它不用于定义像素宽度。根据用于设置输入字段样式的字体，字段的像素宽度可能会有所不同。

对于这个字段:

<input type="text" size="25" name="firstname">

默认情况下，浏览器会将其渲染得足够宽以容纳 25 个字符。

现在，理论上您可以使用上述信息来确定在 CSS 中赋予它的 width，但我自己还没有为此烦恼。此外，正如经常提到的那样，表单元素在页面上的呈现方式因浏览器而异，因此它可能不是确定字段大小的可靠方法。

请记住，使用 CSS 设置 width 总是会覆盖 size 属性。