输入大小与宽度

Question

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

或者

<input name="txtId" type="text" style="width: 150px;" />

哪个是最佳的跨浏览器代码？

当然这取决于要求，但我很想知道人们是如何决定的以及基于什么决定。

原文由 rajakvk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以同时使用两者。 css 样式将覆盖支持 CSS 的浏览器中的 size 属性并使字段具有正确的宽度，对于那些不支持的浏览器，它将回退到指定的字符数。

编辑： 我应该提到 size 属性不是一种精确的大小调整方法： 根据 HTML 规范，它 应该 指的是输入能够显示的当前字体的字符数立刻。

但是，除非指定的字体是固定宽度/等宽字体，否则这 不能 保证指定数量的字符实际上是可见的；在大多数字体中，不同的字符会有不同的宽度。 这个问题 有一些关于这个问题的很好的答案。

下面的代码片段展示了这两种方法。

 @font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}

 <p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

原文由 Mark Bell 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我建议，可能最好的方法是以 em 为单位设置样式的宽度 :) 因此，对于 20 个字符的输入大小，只需设置 style='width:20em' :)

原文由 Thinker 发布，翻译遵循 CC BY-SA 3.0 许可协议