button的width和height和标准的盒模型不一致,是指的包含边框在内的宽度和长度
测试代码:
<!DOCTYPE html> <html> <body> <input id="box" type="text"></input> <input type="button" value="按钮"></input> </body> </html>
1,chrome
(1)text
内容区域:169*15px
padding:1px 0
border:2px;
margin:0
所以总宽度是:169+4=173px
总高度是:15+6=21px;
(2)button
内容区:26*15
padding:1px 6px
border :2px
margin:0
所以总宽度是:26+(6+2)*2=42px
总高度是:15+6=21px;
2,firefox
(1)text:149*16px
padding:2px;
border:1px
margin:0
所以总宽度是:149+6=155px
总高度是:16+6=22px;
(2)button:39*16
padding:0 6px
border:3px
margin:0
所以总宽度是:32+18=57px
总高度是:16+6=22px;
3.ie
(1)text:142.16*15.2
padding:2px 1px
border:1px
margin:0
所以总宽度是:142.16+4=146.16px
总高度是:15.2+6=21.2px;
(2)button:26.66*15.2
padding:3px 10px
border:1px
margin:0
所以总宽度是:26.66+22=48.66px
总高度是:15.2+8=23.2px;
html中换行写了input两个input之间才会有空格的,并不是外边距起的作用,但是button上面有文字的时候会把button撑开,各浏览器的表现也不相同
加了一个空格之后,chrome内容区域加了4px,ie加了6.67px但是firefox宽度没有增加,高度增加了2px...
时间: 2024-10-08 09:00:22