IE 7 中带有图像插件的圆角？
最后我说服我的老板不要再使用圆形图像，
所以我想将它们全部转换为带有 css border-radius 的 html。问题是我们仍然需要 Internet Explorer 7 的支持，解决方案似乎就在这个 jquery 插件< /a>.
问题是，在官方网站上，即使在 IE 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/
知道我错过了什么吗？
谢谢！！
Finally i convinced to my boss not to use rounded images anymore,
So i want to convert all of them into html with css border-radius. The problem is that we still need support with Internet Explorer 7, and the solution seems to be in this jquery plugin.
the thing is that in the oficial website works fine with IE even 6. but i can only get it work in Firefox or Chrome (wich is useless cause they already support border-radius)
this is how i'm trying,
<!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>
this is the proof http://jsfiddle.net/MKvHu/2/
Any idea what i'm missing?
thanks!!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
你为什么不尝试 CSS3PIE ？
why don't you try CSS3PIE ?
虽然没有明确说明，但插件似乎无法将
img元素的边缘圆化：这意味着使用此插件您只能在图像周围有一个纯色的圆形框架。
它之所以能在 Chrome 和 Firefox 中工作，是因为它们本身支持
border-radius，而这确实适用于img元素。但是，如果您将角的类型更改为其他类型，例如bevel，您会发现任何浏览器都不支持它：http://jsfiddle.net/namuol/MKvHu/4/
注意它是如何工作的下面的
div，但不是img。因此，不幸的是，如果 IE7 用户需要对图像进行四舍五入，您可能希望坚持使用静态四舍五入的图像。It's not made explicitly clear, but it doesn't look like the plugin can round the edges of
imgelements:This means that you can only have a rounded frame of a solid color around the image using this plugin.
The reason it appears to work in Chrome and Firefox is because they support
border-radiusnatively, which does work onimgelements. However, if you change the type of corner to something else likebevel, you can see that it is not supported in any browser:http://jsfiddle.net/namuol/MKvHu/4/
Notice how it works for the
divbelow, but not theimg. So, unfortunately you may want to stick with statically-rounded images if IE7 users need images to be rounded.