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

最新推荐文章于 2022-06-14 10:14:13 发布

awnc45298

最新推荐文章于 2022-06-14 10:14:13 发布

阅读量193

点赞数

原文链接：http://www.cnblogs.com/wmx--/p/4387651.html

版权

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

转载于:https://www.cnblogs.com/wmx--/p/4387651.html

awnc45298

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input button和text在不同浏览器中的默认样式

button的width和height和标准的盒模型不一致，是指的包含边框在内的宽度和长度测试代码：<!DOCTYPE html><html><body><input id="box" type="text"></input><input type="button" value="按钮"&g...
复制链接

扫一扫