IEでの「border-radius」のサポート


回答:


220

はい!IE9が2011年1月にリリースされたとき。

たとえば、4辺すべてを15ピクセルにする必要があるとします。

.myclass {
 border-style: solid;
 border-width: 2px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 border-radius: 15px;
}

IE9はデフォルトのを使用するborder-radiusため、境界線の半径を呼び出すすべてのスタイルにそれを含めるようにしてください。これで、サイトはIE9の準備が整います。

-moz-border-radiusFirefox -webkit-border-radius用、SafariおよびChrome用です。

さらに、IEコーディングがie9であることを宣言することを忘れないでください。

<meta http-equiv="X-UA-Compatible" content="IE=9" />

一部の怠惰な開発者が持ってい<meta http-equiv="X-UA-Compatible" content="IE=7" />ます。そのタグが存在する場合、border-radiusはIEで機能しません。


7
おそらくX-UA-Compatibleメタタグを使用していない場合、IE9で動作させるためだけに追加する必要はありませんか?
ピア

72
ベンダープレフィックスバージョンFIRSTと標準LASTを配置して、ブラウザーが実際の標準をサポートしている場合は、ベンダープレフィックスバージョンの代わりにそれを使用するようにしてください。
Jason Berry、

4
メタタグは必要ありません。IE7エミュレータが含まれている場合は、置き換えるだけで済みます。それ以外の場合は、心配しないでください。
ケビンフロリダ州

3
現在のIE9ベータ版の 'border-radius'のFYIは、単一の値を使用して適切に機能します。実際に異なる値にしたくない場合を除いて、4つの値はすべて必須ではありません。
mikemaccana 2010

2
@nailer:コーナーを更新していただきありがとうございます。IE9の最初のアルファとベータは、4つのコーナーすべてを宣言する必要がありました。わからないときに変更.. ..私はちょうどRC IE9最新ダウンロードし、私が一つの値を宣言させて頂いており
ケビン・フロリダ

46

この質問に対する回答は、1年前に質問されてから変更されました。(この質問は現在、グーグルの "border-radius ie"の上位の結果の1つです。)

IE9はをサポートしborder-radiusます。

サポートするプラットフォームプレビューが利用可能です。プレビューを実行するには、Windows VistaまたはWindows 7(およびリリースされたIE9)が必要です。 border-radius



18

回避策と便利なツール:

CSS3Pieは.htcファイルとBehaviorプロパティを使用して、CSS3をIE 6〜8に実装します。

Modernizrは、html要素にクラスを配置する少しのJavaScriptであり、機能に基づいて異なるブラウザーに異なるスタイル定義を提供できます。

明らかに、これらはどちらもオーバーヘッドを追加しますが、IE9ではVista / 7でしか実行できないため、しばらくの間スタックする可能性があります。2010年8月現在、Windows XPは依然としてWebクライアントOSの48%を占めています。


2
CSS3 PIEは、このための最も簡単で邪魔にならないオプションでした。
Chris Rasco、2011

12

IE8では計画されていません。CSS互換性ページを参照してください

それ以上の計画は発表されていません。IE8が Windows XPの最後のバージョンになるという噂があります。


12
IE9もCSS3をサポートすることになっているので、あなたは明らかに間違っています。誰かがIEを殺す
Starx

10
IE8がWindows XPの最後のバージョンであることが判明しました。
M.ダドリー

7

<!DOCTYPE html> このタグがないと、border-radiusはIE9では機能しません。メタタグは必要ありません。





2

境界線の半径と背景のグラデーションのサポートについてはどうですか?はい、IE9は両方を個別にサポートしますが、2つを混合すると、丸みを帯びた角からグラデーションが流れ出します。以下は悪い例へのリンクですが、私自身のテストでも見ました。スクリーンショットを撮る必要があります:(

おそらく本当の問題は、IEがMS-FILTER独自のハックなしでCSS標準をいつサポートするかです。

http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx


IE10は適切なCSS3グラデーションをサポートします(現在のIE10開発者プレビューはすでに-ms-linear-gradientでサポートされています)。IE9でborder-radiusを尊重するグラデーションが必要な場合は、SVG(外部SVGファイルまたはデータURIでエンコードされたファイル)を使用する必要があります-css3wizardry.com/2010/10/29/css-gradients-for-を参照してくださいie9-また、CSS3 PIEは間もなくこれを自動化します。テストビルドが利用可能です
lojjic

簡単な修正は、それを別の要素でラップすることです。親要素に同じborder-radiusを指定し、オーバーフローを非表示に設定します。
セネ

1

解決済み-IE 10および11でボーダー半径を正しくレンダリングしない

IE 10,11で動作する-ms-border-radius:またはborder-radius:を取得しない場合は、すべての四角形をレンダリングしてから、次の手順に従います。

  1. IEブラウザの右上にある歯車をクリックします
  2. 互換表示設定をクリックします
  3. 次に、デフォルトでオンになっている2つのボックスをオフにします。

写真のようにボックスがオフになっていることを確認します

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.