输入大小vs宽度 [英] Input size vs width

问题描述

 < input name =txtIdtype =textsize =20/> 
  

或

 < input name =txtIdtype =textstyle =width：150px; /> 
  

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

当然，这取决于要求，但我很想知道人们的决定和基础。

解决方案

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

编辑：我应该提到 size 属性isn' t精确的大小调整方法：根据HTML规范，它应该指代输入将能够一次显示的当前字体的字符数。

但是，除非指定的字体是固定宽度/等宽字体，否则不是，以保证指定的字符数可见;在大多数字体中，不同的字符将有不同的宽度。 此问题有与此问题相关的一些好的答案

下面的代码段演示了两种方法。

  @ font-face {font-family：'Diplomata'; font-style：normal; font-weight：400; src：local（'Diplomata'），local（'Diplomata-Regular'），url（http://fonts.gstatic.com/s/diplomata/v6/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2）format（'woff2'）;} @ font-face {font-family：'Open Sans Condensed'; font-style：normal; font-weight：300;格式（'Open Sans Cond Light'），local（'OpenSans-CondensedLight'），url（http://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2） woff2'）; uncode-range：U + 0000-00FF，U + 0131，U + 0152-0153，U + 02C6，U + 02DA，U + 02DC，U + 2000-206F，U + 2074，U + 20AC，U + U + 2215，U + E0FF，U + EFFD，U + F000;} p {margin：0 0 10px 0;} input {font-size：20px;}。narrow-font {font-family：'Open Sans Condensed' ，sans-serif;}。width-font {font-family：'Diplomata'，cursive;} set-width {width：220px;}   < p> < input type =textsize =10class =narrow-fontvalue =0123456789/>< / p>< p> < input type =textsize =10class =wide-fontvalue =0123456789/>< / p>< p& < input type =textsize =10class =narrow-font set-widthvalue =0123456789/>< / p>< p& < input type =textsize =10class =wide-font set-widthvalue =0123456789/>< / p>  
 

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

or

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

Which one is optimal cross-browser code?

Of course it depends on requirements, but I'm curious to know how people decide and on what basis.

解决方案

You can use both. The css style will override the size attribute in browsers that support CSS and make the field the correct width, and for those that don't, it will fall back to the specified number of characters.

Edit: I should have mentioned that the size attribute isn't a precise method of sizing: according to the HTML specification, it should refer to the number of characters of the current font the input will be able to display at once.

However, unless the font specified is a fixed-width/monospace font, this is not a guarantee that the specified number of characters will actually be visible; in most fonts, different characters will be different widths. This question has some good answers relating to this issue.

The snippet below demonstrates both approaches.

@font-face {
  font-family: 'Diplomata';
  font-style: normal;
  font-weight: 400;
  src: local('Diplomata'), local('Diplomata-Regular'), url(http://fonts.gstatic.com/s/diplomata/v6/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://fonts.gstatic.com/s/opensanscondensed/v10/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, U+E0FF, U+EFFD, U+F000;
}
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>

这篇关于输入大小vs宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！