溢出：在IE8中使用css3pie隐藏为圆形边框？ [英] Overflow:hidden for rounded borders using css3pie in IE8?

问题描述

我有这个HTML：

<div id="micrositePhotoDiv">
    <img id="micrositePhoto" />
</div>

和css：

#micrositePhotoDiv {
    overflow:hidden;
    @include border-radius(10px);
    behavior: url(PIE.htc);
}

img 在javascript中以编程方式设置。

The src for the img is set programatically in javascript.

img 设置为包含div的宽度。在ie9，firefox，chrome等中，这使得图像具有圆形边框（因为图像的边角在边框之外，并且有 overflow：hidden; ）

The img is set to the width of its containing div. In ie9, firefox, chrome and so on, this makes the image have rounded borders (because the corners of the image are outside the border, and there is overflow:hidden;)

在IE8中，图像没有圆角边框。 border-radius属性生效（如果我执行 border：solid black 1px; ，我可以在图像后面看到它）但是边框外部的图像部分没有被隐藏。

In IE8, the image does not have rounded borders. The border-radius property takes effect (I can see it behind the image if I do border: solid black 1px;) but the parts of the image outside the borders are not hidden.

有没有办法解决这个问题，使用css，css3pie，javascript等？或者这在IE8中无法实现？

Is there any way around this using css, css3pie, javascript etc? Or is this not possible to achieve in IE8?

推荐答案

应用 border-radius 同时 - div 和 img ，它应该有效。

Apply border-radius to both - div and img and it should work.

这篇关于溢出：在IE8中使用css3pie隐藏为圆形边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！