IE 11 の border-radius の異常 (IE 9 および IE 10 では発生しませんでした) 質問する

IE11のborder-radiusに関する同様の質問を検索しましたが、Microsoft IE Developer サイトで見つかったのは 1 つだけですIE 11 に「アップグレード」してから現在私が経験していることについても説明しました。そのスレッドの投稿に対する答えは、DOCTYPE が Quirks ではなく HTML5 であることを確認することでした。

現在、Web サイトの再設計を終えようとしています。HTML5 で、DOCTYPE も正しいのですが、border-radius で奇妙な問題が発生しています。border-radius を適用したほぼすべての要素に 1 ピクセルのオフセットがあります。border-radius のチェックを外すと、問題はなくなり、すべて正常になりますが、驚いたことに、これは IE 9 や IE 10 では問題ではありませんでした。数日前の IE 11 以降、この問題が表面化しました。Windows 7 の IE 11 と Windows 8.1 の IE 11 の両方でテストしましたが、どちらでも問題が発生しています。

例1:

ここに、尖った三角形を取得するために別の疑似要素 :before と :after を適用border-radius: 5px 0 0 5pxしましたが、border-radius によって 1px の白い線が作成されているようで、要素の残りの部分と面一ではなくなりました。これは IE 8 でも問題なく機能しましたが、IE 11 では機能しなくなりました。border-radius を削除すると、疑似要素の三角形が再び要素と面一になります。

例2:

inline-block として表示されるリンクボタン<a>には、背景に linear-gradient、青い 1 ピクセルの実線の境界線、および がありますborder-radius: 4px。ただし、border-radius により、青い 1 ピクセルの境界線の内側に別の 1 ピクセルの白い線が作成されます。border-radius の他の値に関係なく、border-radius が 0 でない限り、白い線はそのまま残ります。

例3:

3 つのリンク要素が内に<a>設定され、その下にある別の要素と相対的に配置されます。下部にはがあり、上部の内側の要素には上部の左と右に border-radius があります (表示)。IE 11 では、2 つの要素の間に 1 ピクセルのギャップが表示されます (上にリンクされている他の投稿者のスレッドに示されているように)。ただし、下部の border-radius を0 に設定すると、ギャップは消えます。display: inline-block<div><div><div>border-radius: 4px<a><div><div><div>

繰り返しますが、これらのインスタンスはいずれも IE 9 および IE 10 では問題になりませんでした。IE 11 以降でのみ、border-radius を持つ要素に「1px のギャップ」が表示されるようになりました。修正方法はわかりません。もちろん、他のブラウザは影響を受けません。Firefox、Safari、Opera、Chrome はすべて正常に表示されます。

ご協力いただければ幸いです。