img 加border-radius变圆形后加入了padding，在ie下不能成圆形的原因？
前不久在某个博客园作者的主页看到其圆头像，模仿其试做了下圆形图片，结果加了padding之后，在ie就不圆了（搞得我一开始还以为是ie不兼容圆角呢，实际上确实因为padding出现的问题），但我想不明白是啥回事。原来代码如下：
<html>
<head>
<title>对比border-radius在ie下受padding的影响</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
margin: 0 auto;
background-color: #ffcc99;
width:300px;
height: 150px;
border:1px solid #000;
}
img{
width: 100px;
height: 100px;
border-radius: 100px;
}
.img-padding{
padding: 10px;
}
.img-margin{
margin: 10px;
}
.img-bbox{
box-sizing: border-box;
}
</style>
</head>
<body>
<div >
<img class="img-padding" src="http://shellphon.github.io/images/finger.png" />
</div>
<div >
<img class="img-margin" src="http://shellphon.github.io/images/finger.png" />
</div>
<div >
<img class="img-padding img-bbox" src="http://shellphon.github.io/images/finger.png" />
</div>
</body>
</html>
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
首先border-radius是裁剪而不是变形
IE盒模型的解析方式跟标准不一样，因为在IE下你设置的padding值也被算到img的尺寸内的，所以在IE下的裁剪是内含padding进行的，而标准是只对img进行裁剪，你给img加个背景色就会发现倪端
另外padding是内边距，基于img的边界，IE下border边框也是被计算在img尺寸内的，所以你会发现在IE下加上border就好了，那是因为此时的padding是基于border的边界的内边距了2019-07-17 19:14:38赞同 展开评论
问答标签：
相关问答