css中“border”在chrome与ie中的不同

来源：互联网发布：航测软件有哪些编辑：程序博客网时间：2024/06/05 07:12

今天在研究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也会出现类似的情况，感兴趣的朋友可以试一试