IE8中的圆角图像角

Question

I have a few images generated dynamicaly :

<div class="image">
<?php echo "<img class='logo_client' src='img/clients/".$row['logo_name'].".jpg''>"; ?>
</div>

And I would like them to have rounded corner so that in my CSS I put :

.image {
padding: 0;
width: 100px;
height: 100px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px; 
border-radius: 10px;    
behavior: url(css/PIE.php);
}

I can see the rounded corners in Firefox, Chrome and IE9 but it's not working in IE8. The PIE thing is already working with other elements in IE8.

Does anyone know what it could be ?

Thank you very much

Answer 1

The only way I know of making rounded corners work in IE8 and below is with code like this:

<div class="image">
   <span class="tl"></span>
   <span class="tr"></span>
   <span class="br"></span>
   <span class="bl"></span>
</div>

and then with CSS like this:

.image { position: relative; }
.tl, .tr, .br, .bl { position: absolute; }
.tl { left: 0; top: 0; width: 20px; height: 20px; background: url(/images/tl.png) no-repeat top left; }
.tr { right: 0; top: 0; width: 20px; height: 20px; background: url(/images/tr.png) no-repeat top left; }
.br { right: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/br.png) no-repeat top left; }
.bl { left: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/bl.png) no-repeat top left; }

where the background images are all images of rounded corners corresponding to that corner, eg the bottom right hand corner background image might look like this:

and so one (hope that makes sense)

There might be nicer ways to do this, as the above method is a bit laborious, and not particularly clean.

Saying that, I doubt any ways of getting rounded corners to work in IE8 and below will be particularly "clean". I usually just leave IE8 and below without rounded corners, not that many people even use 7 and 8 anymore in comparison to other browsers.

EDIT:

If I were you I'd steer well clear of code like this "behavior: url(css/PIE.php);" IE behaviours are not supported in other browsers, I think even Microsoft gave up on them.

Answer 2

Finaly I made it work with CSS3 PIE. Rounded corners appear appear in IE7, IE8 and all other browsers. It was a coding mistake, sorry.