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属性和宽度。