Question

我有一个在IE9和Firefox中运行良好的JavaScript，但在Chrome中没有。我想要一些建议来解决这个问题。

我正在尝试一个很酷的技巧来绕过我从http://www.bram.us/sandbox/roundedcorners/学到的图像角落。我更新了我的CSS并包含了上述网站中的javascript，但实际上所有图片都在Chrome上消失，而其他两个浏览器按预期呈现圆角。

我知道此脚本也适用于Chrome，因为http://www.bram.us/sandbox/roundedcorners/在Chrome上运行良好。

这是javascript。

jQuery(function($) {
    $('img').wrap(function() {
        return '<span style="background-image:url(' + $(this).attr('src') + '); height: '+ $(this).height() + 'px; width: '+ $(this).width() + 'px;" class="rounded" />';
    });
});

提前致谢!!

Answer 1

你确定你没有忘记在.rounded课程的css中加入任何这些内容吗？

-webkit-border-radius

border-radius

display: block或display:inline-block

Answer 2

Chrome可以很好地支持使用CSS对图像进行舍入。我建议在这里避免使用JavaScript，而是使用以下内容：

img {
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    border-radius: 12px;         /* Opera 10.5, IE9, Saf5, Chrome, 
                                    FF4+, iOS 4, Android 2.1+ */
}

以上内容可在css3please.com上找到。

用于在Chrome上无效的圆角图片的Javascript

2 个答案: