2011-10-14 14 views
6

tengo este código HTML:Desbordamiento: oculto para bordes redondeados usando css3pie en IE8?

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

y CSS:

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

El src para la img se establece mediante programación en JavaScript.

El img se establece en el ancho de su div que contiene. En ie9, firefox, cromo, etc., esto hace que la imagen tenga bordes redondeados (porque las esquinas de la imagen están fuera del borde, y hay overflow:hidden;)

En IE8, la imagen no tiene bordes redondeados. La propiedad border-radius tiene efecto (puedo verla detrás de la imagen si lo hago border: solid black 1px;) pero las partes de la imagen fuera de los bordes no están ocultas.

¿Hay alguna forma de evitar esto usando css, css3pie, javascript, etc.? ¿O esto no es posible de lograr en IE8?

Respuesta

6

Aplicar border-radius a ambos - div y img y debería funcionar.

+3

Love Stack overflow .. – palmic

Cuestiones relacionadas