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.
精彩评论