IE8中的圆角图像角

时间:2012-08-05 13:28:54

标签: css image internet-explorer-8 rounded-corners css3pie

我有一些动态生成的图片:

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

我希望他们有圆角,以便在我的CSS中放置:

.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);
}

我可以在Firefox,Chrome和IE9中看到圆角,但它在IE8中无效。 PIE的事情已经与IE8中的其他元素一起使用了。

有谁知道它可能是什么?

非常感谢

2 个答案:

答案 0 :(得分:0)

我知道在IE8及以下版本中使用圆角的唯一方法是使用以下代码:

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

然后用这样的CSS:

.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; }

其中背景图像是对应于该角落的圆角的所有图像,例如,右下角的背景图片可能如下所示:

http://www.webcredible.co.uk/i/br2.gif

等等(希望有道理)

可能有更好的方法可以做到这一点,因为上述方法有点费力,而且不是特别干净。

这样说,我怀疑任何在IE8及以下版本中使用圆角的方法都会特别“干净”。我通常只留下没有圆角的IE8及以下版本,与其他浏览器相比,我不再使用7和8了。

编辑:

如果我是你,我会很好地避开代码,例如“行为:url(css / PIE.php);”其他浏览器不支持IE行为,我认为甚至微软都放弃了它们。

答案 1 :(得分:0)

最终我使用了CSS3 PIE。圆角出现在IE7,IE8和所有其他浏览器中。这是一个编码错误,对不起。