1

IE9とFirefoxでは正常に動作するJavaScriptがありますが、Chromeでは動作しません。この問題を解決するためのアドバイスをお願いします。

http://www.bram.us/sandbox/roundedcorners/から学んだ画像の角を丸くするためのクールなトリックを試しています。上記のサイトのようにcssを更新し、javascriptを含めましたが、実際にはすべての画像がChromeで消え、他の2つのブラウザーは意図したとおりに丸みを帯びた角をレンダリングします。

http://www.bram.us/sandbox/roundedcorners/はChromeで正常に機能するため、このスクリプトは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" />';
    });
});

前もって感謝します！！

4

2 に答える 2

1

.roundedクラスのCSSにこれらのいずれかを含めることを忘れていませんか？

-webkit-border-radius

border-radius

display: blockまたdisplay:inline-block

于 2012-05-28T17:18:02.800 に答える
1

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で見つけることができます。

于 2012-05-30T13:13:34.913 に答える