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

时间：2015-04-02 18:11:13 阅读：141 评论：0 收藏：0 [点我收藏+]

标签：

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...

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

标签：

原文地址：http://www.cnblogs.com/wmx--/p/4387651.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行