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>

目标效果图：

结果图：

如代码所示，第二个img改用了margin代替padding，ie就不闹了。
刚刚也做了另一个尝试，给img加一个border:1px solid transparent也能成功。
只是没想通为什么ie会那个样子？(跟box-sizing有关么？好像没关)求大大指导。

ps:而原来参考的圆头像因为刚好图片背景是白色的，直接加了background-color:#FFFFFF;就巧妙躲过了
http://jsfiddle.net/dont27/LHL4r/

首先border-radius是裁剪而不是变形
IE盒模型的解析方式跟标准不一样，因为在IE下你设置的padding值也被算到img的尺寸内的，所以在IE下的裁剪是内含padding进行的，而标准是只对img进行裁剪，你给img加个背景色就会发现倪端
另外padding是内边距，基于img的边界，IE下border边框也是被计算在img尺寸内的，所以你会发现在IE下加上border就好了，那是因为此时的padding是基于border的边界的内边距了

【热门文章】