2

IE8 で角を丸くすることに関する記事が数多くあることは知っています。私の質問は、Modernizr を使用して CSS3/HTML5 機能をサポートする方法を教えてください。

たとえば、IE8 で丸みを帯びた角を表示するには、CSS-3 プロパティを使用しています。

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

ページに Modernizr を含めましたが、IE8 で丸みを帯びた角が表示されません。

4

1 に答える 1

8

Modernizr は機能を有効にするのではなく、機能が利用可能かどうかをテストするだけです。CSS の場合、次のようなベンダー固有のプロパティを使用する必要がなくなり、代わりに標準のプロパティを単純に使用できるよう-moz-*に-webkit-*なります。

.myElement {
    -webkit-border-radius: 20px; /* No need for this */
    -moz-border-radius: 20px;    /* No need for this */
    border-radius: 20px;
}

IE8 の丸みを帯びた角については、Modernizr 機能の検出を気にせず、単にCSS PIEを使用してそれらを有効にします。

.myElement {
    border-radius: 8px;
    behavior: url(/PIE.htc); /* only IE will use this */
}

これを機能させる方法については、必ずドキュメントをお読みください。

補足として、標準border-radiusは mozilla および webkit ブラウザーによってかなり長い間サポートされています。これらのプレフィックスを必要とするブラウザーを実際にターゲットにしているかどうかを確認することをお勧めします: http://caniuse.com/#search= border-radius ([すべてのバージョンを表示] をクリック)

于 2012-11-08T12:45:39.707 に答える