input大小与宽度
<input name="txtId" type="text" size="20" /> 要么
<input name="txtId" type="text" style="width: 150px;" />
哪一个是最佳的跨浏览器代码？
当然这取决于需求，但我很想知道人们是如何决定的，以及是以什么为基础的。
你可以使用两者。 CSS样式将覆盖支持CSS的浏览器中的size属性，并使字段的宽度正确，对于那些不支持CSS的字段，它将回退到指定的字符数。
编辑：我应该提到size属性不是一个精确的大小调整方法： 根据HTML规范 ，它应该引用input将能够立刻显示的当前字体的字符数。
但是，除非指定的字体是固定宽度/等宽字体，否则这不能保证指定数量的字符实际上是可见的; 在大多数字体中，不同的字符将是不同的宽度。 这个问题有关于这个问题的一些很好的答案。
下面的代码片段展示了两种方法。
@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>
我build议，可能最好的方法是在em单位设置样式的宽度:)所以对于20个字符的input大小只需设置style='width:20em' 🙂
size在不同的浏览器和他们可能的字体设置不一致。
在px中设置的width样式至less是一致的，模块大小的问题 。 如果你想相对于字体来设置它的大小，你可能还想设置'em'的风格（尽pipe这样做除非明确设置input的font系列和大小，否则将不一致），或者如果你正在制作'％'液体布局forms。 无论哪种方式，样式表可能比内联style属性更可取。
您仍然需要<select multiple> size以使高度与选项正确alignment。 但是我不会在<input>上使用它。
我想说这是违背“传统的智慧”，但我通常更喜欢使用大小。 其原因正是很多人不这么说的原因：根据字体大小，字段的宽度因浏览器而异。 具体来说，无论浏览器设置如何，它总是会显示指定数量的字符。
例如，如果我有一个date字段，我通常希望足够宽的字段显示8或10个字符（两位数的月份和date，两位或四位数的年份，与分隔符）。 设置大小属性本质上保证我整个date将是可见的，最小的浪费空间。 对于大多数数字也是如此 – 我知道期望值的范围，所以我将设置size属性为合适的数字位数，加上小数点（如果适用）。
据我所知，没有CSS属性这样做。 例如，在em中设置宽度是基于高度而不是宽度，因此如果要显示已知数量的字符，则不是很精确。
当然，这个逻辑并不总是适用 – 例如，名称input字段可以包含任意数量的字符。 在这些情况下，我将回退到CSS宽度属性，通常在px中。 但是，我会说我所做的大部分字段都有一些已知的内容，通过指定size属性，我可以确保大多数内容在大多数情况下都不显示剪切。
HTML控制元素的语义。 CSS控制页面的布局/样式。 在控制布局时使用CSS。
总之，千万不要用size =“”
如果你使用宽度（你的第二个例子），你会得到更多的一致性。
我刚刚和一张桌子打了一架，我无法缩小桌子的宽度。 我search使用萤火虫，但无法find设置宽度如此之高的元素。
最后，我试着改变input文本元素的大小属性 ，并修复它。 由于某些原因， size属性会覆盖CSS宽度。 我正在使用jQuerydynamic添加行到一个表，这是包含input的行。 所以也许在使用appendTo（）函数来dynamic添加input时，最好设置size属性和宽度。
