Question

最后我说服我的老板不再使用圆形图像，

所以我想将所有这些转换为带有css border-radius的html。问题是我们仍然需要Internet Explorer 7的支持，解决方案似乎就在这个jquery plugin中。

事实是，在官方网站上工作得很好，即使是6甚至6.但我只能在Firefox或Chrome中使用它（因为它们已经支持border-radius而无用）

这就是我的尝试，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('.rounded5').corner();
});

</script>
</head>

<body>

<img src="http://images.wikia.com/logopedia/images/d/dc/TRYP_by_Wyndham_logo.png" style="width:50%;" alt="trip" class="rounded5" />

</body>

</html>

这是证据http://jsfiddle.net/MKvHu/2/

知道我缺少什么吗？

谢谢！

Answer 1

为什么不试试CSS3PIE？

Answer 2

它没有明确说明，但它看起来不像插件可以围绕img元素的边缘：

重要的是要理解这个角落插件通过向页面添加更多元素来消除它的魔力。具体来说，它将div“条带”添加到要进入角落的项目中，并在这些条带上设置纯色背景颜色，以隐藏真实项目的实际角落。

这意味着您只能使用此插件在图像周围使用纯色的框架。

它在Chrome和Firefox中运行的原因是因为它们原生支持border-radius，支持img元素。但是，如果您将角落类型更改为bevel之类的其他内容，则可以看到任何浏览器都不支持它： http://jsfiddle.net/namuol/MKvHu/4/

请注意下面的div是如何工作的，而不是img。因此，遗憾的是，如果IE7用户需要图像被舍入，您可能希望坚持使用静态舍入的图像。

带有插件的圆角和IE 7中的图像？

2 个答案: