4

境界半径に次のコードを使用しています。

.box {
     width:250px;
     height:250px;
     background:#ce0000;
     border-top-left-radius: 15px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     border-top-right-radius: 15px;
     behavior:url(images/PIE.htc);
}

IE 9 では正常に動作しましたが、IE 8 では動作しません。何が間違っているのでしょうか?

4

1 に答える 1

3

ドキュメントによると、PIEは省略形の境界半径ルールのみをサポートしています。

PIEが解析するすべてのCSSプロパティについて、それらのプロパティの短縮バージョンのみが認識されます。たとえば、border-radiusはサポートされていますが、個々のlonghandborder-top-left-radiusなどのプロパティはサポートされていません。

この理由は、CSSファイルに対してURLが解決されないのと同じ理由です（上記を参照）。PIEには、各スタイルプロパティの取得元が表示されません。ショートハンドプロパティとロングハンドプロパティの両方が存在する場合、PIEは、CSS作成者がそれらのプロパティを指定した順序を判別することも、各プロパティのセレクターの特異性を判別することもできません。したがって、どのプロパティを優先するかについて、十分な情報に基づいて決定することはできません。

ばかげた推測を避けるために、省略形のプロパティのみをサポートすることを選択しました。ファイルサイズを小さく保ち、面倒な繰り返しを避けるために、ロングハンドよりもショートハンドが選択されました。

http://css3pie.com/documentation/known-issues/#shorthand

したがって、CSSを次のように変更してみてください。

.box {
     width:250px;
     height:250px;
     background:#ce0000;
     border-radius : 15px 15px 5px 5px;
     behavior:url(images/PIE.htc);
}
于 2013-03-02T05:35:00.623 に答える