Переполнение: скрыто для скругленных границ, используя css3pie в IE8? - PullRequest
6 голосов
/ 14 октября 2011

У меня есть этот HTML:

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

и css:

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

Src для img устанавливается программно в javascript.

img устанавливается на ширину содержащего его div. В ie9, firefox, chrome и т. Д. Это делает изображение округленными границами (поскольку углы изображения находятся за пределами границы, и есть overflow:hidden;)

В IE8 изображение не имеет закругленных границ. Свойство border-radius вступает в силу (я вижу его за изображением, если я делаю border: solid black 1px;), но части изображения за пределами границ не скрыты.

Есть ли способ обойти это, используя css, css3pie, javascript и т. Д.? Или это невозможно сделать в IE8?

1 Ответ

6 голосов
/ 14 октября 2011

Примените border-radius к обоим - div и img, и оно должно работать.

...