<input name="txtId" type="text" size="20" />
or
<input name="txtId" type="text" style="width: 150px;" />
哪个是最佳的跨浏览器代码?
当然,这取决于需求,但我很好奇人们是如何决定的,基于什么。
<input name="txtId" type="text" size="20" />
or
<input name="txtId" type="text" style="width: 150px;" />
哪个是最佳的跨浏览器代码?
当然,这取决于需求,但我很好奇人们是如何决定的,基于什么。
当前回答
我想说这违背了“传统智慧”,但我通常更喜欢使用大小。这样做的原因正是许多人说不应该这样做的原因:字段的宽度因浏览器而异,取决于字体大小。具体来说,无论浏览器设置如何,它总是足够大以显示指定的字符数。
例如,如果我有一个日期字段,我通常希望字段宽度足以显示8或10个字符(两位数的月和日,两位数或四位数的年,带分隔符)。设置size属性本质上保证了整个日期都是可见的,浪费的空间最小。对于大多数数字也是如此——我知道预期值的范围,所以我将size属性设置为适当的位数,如果适用,还可以加上小数点。
据我所知,没有CSS属性这样做。例如,在em中设置宽度是基于高度,而不是宽度,因此如果您想显示已知数量的字符,则不是非常精确。
当然,这种逻辑并不总是适用——例如,名称输入字段可以包含任意数量的字符。在这些情况下,我将回到CSS宽度属性,通常在px。但是,我想说的是,我所创建的大多数字段都具有某种已知内容,并且通过指定size属性,我可以确保在大多数情况下,大部分内容都在没有剪切的情况下显示出来。
其他回答
HTML控制元素的语义。CSS控制页面的布局/样式。当你控制你的布局时使用CSS。
简而言之,永远不要使用size=""
我刚刚解决了一个表格,无论我试图缩小哪个元素,表格的宽度都保持不变。我使用firebug搜索,但找不到将宽度设置得这么高的元素。
最后,我尝试改变输入文本元素的大小属性,这就固定了它。由于某种原因,size属性覆盖了css宽度。我使用jQuery动态添加行到一个表,它是这些行,包含输入。因此,在使用appendTo()函数动态添加输入时,最好同时设置size属性和width。
HTML中的size属性和CSS中的width属性都将设置<input>的宽度。如果你想将宽度设置为接近每个字符的宽度,请使用**ch**单位,如下所示:
input {
width: 10ch;
}
我想说这违背了“传统智慧”,但我通常更喜欢使用大小。这样做的原因正是许多人说不应该这样做的原因:字段的宽度因浏览器而异,取决于字体大小。具体来说,无论浏览器设置如何,它总是足够大以显示指定的字符数。
例如,如果我有一个日期字段,我通常希望字段宽度足以显示8或10个字符(两位数的月和日,两位数或四位数的年,带分隔符)。设置size属性本质上保证了整个日期都是可见的,浪费的空间最小。对于大多数数字也是如此——我知道预期值的范围,所以我将size属性设置为适当的位数,如果适用,还可以加上小数点。
据我所知,没有CSS属性这样做。例如,在em中设置宽度是基于高度,而不是宽度,因此如果您想显示已知数量的字符,则不是非常精确。
当然,这种逻辑并不总是适用——例如,名称输入字段可以包含任意数量的字符。在这些情况下,我将回到CSS宽度属性,通常在px。但是,我想说的是,我所创建的大多数字段都具有某种已知内容,并且通过指定size属性,我可以确保在大多数情况下,大部分内容都在没有剪切的情况下显示出来。
你可以两者都用。css样式将覆盖支持css的浏览器中的size属性,并使字段具有正确的宽度,对于那些不支持css的浏览器,它将退回到指定的字符数。
编辑:我应该提到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>