开发者

Overflow:hidden for rounded borders using css3pie in IE8?

开发者 https://www.devze.com 2023-04-12 19:22 出处:网络
I have this HTML: <div id=\"micrositePhotoDiv\"> <img id=\"micrositePhoto\" /> </div> and css:

I have this HTML:

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

and css:

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

The src for the img is set programatically in javascript.

The img is set to the width of its containing div. In ie9, firefox, chrom开发者_JAVA技巧e 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;)

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.

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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消