您的位置：首页 > Web前端 > CSS

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

2012-05-22 22:51 190 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： chrome border ie css div 测试

相关文章推荐

新的分享

章节导航