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

时间：2015-04-02 18:09:16 阅读：116 评论：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年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)