<input name="txtId" type="text" size="20" />
或
<input name="txtId" type="text" style="width: 150px;" />
哪一个是最佳的跨浏览器代码？
当然这取决于要求，但我很想知道人们是如何决定的以及基于什么决定。
【问题讨论】：
你可以同时使用。 css 样式将覆盖支持 CSS 的浏览器中的 size 属性并使字段具有正确的宽度，对于不支持的浏览器，它将回退到指定的字符数。
编辑：我应该提到size 属性不是精确的大小调整方法：according to the HTML specification，它应该指的是字符数当前字体的输入将能够立即显示。
但是，除非指定的字体是固定宽度/等宽字体，否则不保证指定数量的字符实际上是可见的；在大多数字体中，不同的字符会有不同的宽度。 This question 对此问题有一些很好的答案。
下面的 sn-p 演示了这两种方法。
@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>【讨论】：
我建议，可能最好的方法是以 em 为单位设置样式的宽度 :) 所以对于 20 个字符的输入大小只需设置 style='width:20em' :)
【讨论】：
ch这个单位最适合这个应用。
size 在不同浏览器及其可能的字体设置中不一致。
在 px 中设置的 width 样式至少是一致的，以 box-sizing issues 为模。如果您想相对于字体调整样式，您可能还想在 'em' 中设置样式（但同样，除非您明确设置输入的 font 系列和大小，否则这将不一致），或者如果您使用 '%'正在制作一个液体布局形式。无论哪种方式，样式表都可能比内联 style 属性更可取。
您仍然需要 size 和 <select multiple> 才能使高度与选项正确对齐。但我不会在<input> 上使用它。
【讨论】：
我想说这违背了“传统智慧”，但我通常更喜欢使用大小。这样做的原因正是很多人说不要的原因：字段的宽度会因浏览器而异，具体取决于字体大小。具体来说，无论浏览器设置如何，它总是足够大以显示指定数量的字符。
例如，如果我有一个日期字段，我通常希望该字段足够宽以显示 8 或 10 个字符（两位数的月份和日期以及两位或四位数的年份，带分隔符）。设置 size 属性基本上可以保证整个日期都是可见的，并且浪费的空间最少。对于大多数数字也是如此 - 我知道预期值的范围，因此我将 size 属性设置为适当的位数，如果适用，加上小数点。
据我所知，没有 CSS 属性可以做到这一点。例如，以 em 为单位设置宽度是基于高度而不是宽度，因此如果要显示已知数量的字符，则不是很精确。
当然，这种逻辑并不总是适用 - 例如，名称输入字段可以包含任意数量的字符。在这些情况下，我将回退到 CSS 宽度属性，通常以 px 为单位。但是，我会说我制作的大多数字段都有某种已知内容，并且通过指定 size 属性，我可以确保 most 的内容，在 most情况下，显示时不剪裁。
【讨论】：
ex 单位，尽管使用 size 仍然可以简化大多数情况，因为您的 css 中没有数十个 id/classes 作为宽度。
ex 是字符的高度（特别是“X”），而不是宽度 - 就像 em。由于字符的高度和宽度（x 或其他）之间没有固定的关系，因此没有理由相信使用字符的高度来设置字段的宽度会使字段具有适当的宽度以显示任何给定的字符数。它可能更宽或更窄，具体取决于字体。现在ch 单元看起来很有希望，但在 IE 小于 9 中不受支持，这在我写这篇文章时会是一个问题。
ch 不幸的是，可能会更好，有些零很薄，它可能无法测量完整的字符空间......
size 属性力求做到完全正确那。 ex 是一个合理的选择可能是对的，但事实仍然是它是一个高度属性，而不是一个宽度属性。 size 是一个宽度属性，只是不是 css。
HTML 中的size 属性和CSS 中的width 属性都将设置<input> 的宽度。如果您想将宽度设置为更接近每个字符的宽度，请使用 **ch** 单位，如下所示：
input {
width: 10ch;
}
【讨论】：
我刚刚与一张桌子打架，无论我试图缩小哪个元素，桌子的宽度都保持不变。我使用 firebug 进行搜索，但找不到将宽度设置得如此之高的元素。
最后我尝试更改输入文本元素的 size 属性 并修复它。出于某种原因，size 属性 覆盖了 css 宽度。我正在使用 jQuery 向表中动态添加行，正是这些行包含了输入。因此，也许在使用 appendTo() 函数动态添加输入时，最好将 size 属性 与宽度一起设置。
【讨论】：
如果你使用宽度（你的第二个例子），你会得到更多的一致性。
【讨论】：
您可以使用样式和宽度来调整文本框的大小。 这是它的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div align="center">
<form method="post">
<div class="w3-row w3-section">
<div class="w3-rest" align = "center">
<input name="lastName" type="text" id="myInput" style="width: 50%">
</div>
</div>
</form>
</div>
</body>
</html>使用 align 使文本框居中。
【讨论】：
HTML 控制元素的语义。 CSS 控制页面的布局/样式。在控制布局时使用 CSS。
简而言之，永远不要使用 size=""
【讨论】：