input button和text在不同浏览器中的默认样式

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...
posted @ 2015-04-02 17:31  w0101  阅读(1240)  评论(0编辑  收藏  举报