网页前端开发-控制input输入框的高度
2013/3/8 14:16:35来源:百度泛用户体验
输入框高度
<input style="height: 28px;" type="text" />
- IE6(xp)
- IE7(xp)
- IE8(win7)
- Firefox 3.5(xp)
- Firefox 3.5(win7)
- Firefox 3.5(mac 10.6.2)
- Firefox 3.5(ubuntu 10.4)
- Chrome 5(xp)
- Chrome 5(win7)
- Chrome 5(mac 10.6.2)
- Chrome 5(ubuntu 10.4)
通过设定height的方式
<input style="font: 16px arial; height: 1.78em; padding-top: 2px;" type="text" />
浏览器 | height + padding-top + padding-bottom + border-top-width + border-bottom-width |
---|---|
IE6(xp) | 21 + 2 + 1 + 2 + 2 = 28 |
IE7(xp) | 21 + 2 + 1 + 2 + 2 = 28 |
IE8(win7) | 21 + 2 + 1 + 2 + 2 = 28 |
Firefox 3.5(xp) | 21 + 2 + 1 + 2 + 2 = 28 |
Firefox 3.5(win7) | 23 + 2 + 1 + 1 + 1 = 28 |
Firefox 3.5(mac 10.6.2) | 19 + 2 + 1 + 3 + 3 = 28 |
Firefox 3.5(ubuntu 10.04) | 19 + 2 + 1 + 3 + 3 = 28 |
Chrome 5(xp) | 21 + 2 + 1 + 2 + 2 = 28 |
Chrome 5(win7) | 21 + 2 + 1 + 2 + 2 = 28 |
Chrome 5(mac 10.6.2) | 21 + 2 + 1 + 2 + 2 = 28 |
Chrome 5(ubuntu 10.04) | 21 + 2 + 1 + 2 + 2 = 28 |
浏览器 | height + padding-top + padding-bottom + border-top-width + border-bottom-width |
---|---|
IE6(xp) | 28 + 2 + 1 + 2 + 2 = 35 |
IE7(xp) | 28 + 2 + 1 + 2 + 2 = 35 |
IE8(win7) | 28 + 2 + 1 + 2 + 2 = 35 |
Firefox 3.5(xp) | 28 + 2 + 1 + 2 + 2 = 35 |
Firefox 3.5(win7) | 28 + 2 + 1 + 1 + 1 = 32 |
Firefox 3.5(mac 10.6.2) | 28 + 2 + 1 + 3 + 3 = 37 |
Firefox 3.5(ubuntu 10.04) | 28 + 2 + 1 + 3 + 3 = 37 |
Chrome 5(xp) | 28 + 2 + 1 + 2 + 2 = 35 |
Chrome 5(win7) | 28 + 2 + 1 + 2 + 2 = 35 |
Chrome 5(mac 10.6.2) | 28 + 2 + 1 + 2 + 2 = 35 |
Chrome 5(ubuntu 10.04) | 28 + 2 + 1 + 2 + 2 = 35 |
padding的方式
<input style="font: 16px arial; padding: 3px;" type="text" />
浏览器 | height + padding-top + padding-bottom + border-top-width + border-bottom-width |
---|---|
IE6(xp) | 18 + 3 + 3 + 2 + 2 = 28 |
IE7(xp) | 18 + 3 + 3 + 2 + 2 = 28 |
IE8(win7) | 18 + 3 + 3 + 2 + 2 = 28 |
Firefox 3.5(xp) | 19 + 3 + 3 + 2 + 2 = 29 |
Firefox 3.5(win7) | 19 + 3 + 3 + 1 + 1 = 27 |
Firefox 3.5(mac 10.6.2) | 20 + 3 + 3 + 3 + 3 = 32 |
Firefox 3.5(ubuntu 10.04) | 19 + 3 + 3 + 3 + 3 = 31 |
Chrome 5(xp) | 19 + 3 + 3 + 2 + 2 = 29 |
Chrome 5(win7) | 19 + 3 + 3 + 2 + 2 = 29 |
Chrome 5(mac 10.6.2) | 18 + 3 + 3 + 2 + 2 = 28 |
Chrome 5(ubuntu 10.04) | 19 + 3 + 3 + 2 + 2 = 29 |
浏览器 | height |
---|---|
IE6(xp) | 16 |
IE7(xp) | 16 |
IE8(win7) | 16 |
Firefox 3.5(xp) | 16 |
Firefox 3.5(win7) | 16 |
Firefox 3.5(mac 10.6.2) | 16 |
Firefox 3.5(ubuntu 10.04) | 16 |
Chrome 5(xp) | 16 |
Chrome 5(win7) | 16 |
Chrome 5(mac 10.6.2) | 16 |
Chrome 5(ubuntu 10.04) | 16 |
box-sizing
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 28px; *height: 22px;
Browser | Lowest Version | Support of |
---|---|---|
Internet Explorer | 8.0 | box-sizing |
Firefox (Gecko) | 1.0 (1.0) | -moz-box-sizing |
Opera | 7.0 | box-sizing |
Safari (WebKit) | 3.0 (522) | -webkit-box-sizing |
padding-top: 0; padding-bottom: 0; height: 28px; *height: 24px;
浏览器在quirks下的实现方法
int RenderBox::calcContentBoxHeight(int height) const { if (style()->boxSizing() == BORDER_BOX) height -= (borderTop() + borderBottom() + paddingTop() + paddingBottom()); return max(0, height); }
/* * Quirk: Use border-box box sizing for text inputs, password inputs, and * textareas. (b=184478 on why we use content-box sizing in standards mode) */ /* Note that all other <input />s already use border-box sizing, so we're ok with this selector */ input:not([type=image]), textarea { -moz-box-sizing: border-box; }
/* This will apply only to text fields, since all other inputs already use border box sizing */ input:not([type=image]), textarea { -webkit-box-sizing: border-box; }
one more thing
结论
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd1384.html
本文地址:http://www.tuquu.com/tutorial/wd1384.html
下一篇:更加有效的进行网页交互评审
这些是最新的
最热门的教程