對於在Chrome上不起作用的圓角圖像的Javascript

我有一個JavaScript，在IE9和Firefox中可以正常工作，但在Chrome中不能正常工作。我想要一些建議來解決這個問題。對於在Chrome上不起作用的圓角圖像的Javascript

我正在嘗試一個很酷的技巧來繞過我從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" />'; 
    }); 
});

在此先感謝！

來源

2012-05-28 Jason O.

我可以問爲什麼你不只是使用CSS來轉角？ Chrome對'border-radius'有很大的支持。 – Sampson

你說得對。我刪除了JavaScript，而是更改了img標籤的CSS，然後它適用於所有瀏覽器。謝謝！ –

@javvva我已經將我的建議轉移到下面的部分作爲答案，還包括對於您將來可能會遇到的任何CSS3問題的引用。 – Sampson

你確定你沒有忘記在你的css中包含任何這些類的.rounded類嗎？

-webkit-border-radius

border-radius

display: block或display:inline-block

來源

2012-05-28 17:18:02 user2428118

感謝您花時間回答我的問題。我確實包含了上面提到的所有三行，但它在JavaScript中並不適用於Chrome。當我刪除了javascript併爲img標籤使用了border-radius時，它開始在所有瀏覽器類型中工作。 –

鉻具有與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找到。

來源

2012-05-30 13:13:34 Sampson

對於在Chrome上不起作用的圓角圖像的Javascript

回答

相關問題