今天在研究css的盒模型问题,本意是想测试css中关于margin、pading、border与width、height的关系。
但是无意中发现边框的大小在谷歌的chrome与微软的ie中认定是完全不同的。
html代码如下:
<style type="text/css">
#ceshi1{
width:300px;
height:300px;
background:#ccc;
margin:30px;
border:10px solid black;
}
#ceshi2{
width:300px;
height:300px;
background:#ccc;
margin:30px;
border:0px solid black;
}
</style>
<html>
<body>
<div id="ceshi1">123</div>
<div id="ceshi2">456</div>
</body>
</html>
定义了2个div,其中一个加上了粗细为5px的边框。而一个并没有加上边框。在chrome与ie中测试,显示效果如下:
这是在ie中显示的,从ie5.5到ie9. 显示效果均一致边框的粗细实际上是包含在了你所定义的div的宽度和高度之中的。比如原来你所定义的div为300px×300px,那么加上了边框后,实际上div的可使用大小变成了(300-边框粗细)×(300-边框粗细)。
而在谷歌的chrome中,显示效果却完全不同
可以看到,在chrome中。将border的宽度增加在了整个div的外面。而div的可使用面积实际上还是原来的300px×300px
而与之相同的是,不仅border会出现这样的差异。就连padding也会出现类似的情况,感兴趣的朋友可以试一试