今天在研究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>
这是在ie中显示的，从ie5.5到ie9. 显示效果均一致边框的粗细实际上是包含在了你所定义的div的宽度和高度之中的。比如原来你所定义的div为300px×300px，那么加上了边框后，实际上div的可使用大小变成了（300-边框粗细）×（300-边框粗细）。
而在谷歌的chrome中，显示效果却完全不同
可以看到，在chrome中。将border的宽度增加在了整个div的外面。而div的可使用面积实际上还是原来的300px×300px
而与之相同的是，不仅border会出现这样的差异。就连padding也会出现类似的情况，感兴趣的朋友可以试一试
53
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
