IE 11 border-radius weirdness（IE 9 and IE 10）では発生しませんでした）
私はIE 11でborder-radiusに関連する同様の質問を検索しましたが、- Microsoft IE開発者サイトで1つだけ見つかりました 現在の私も説明していますIEへの「アップグレード」以来の経験11.そのスレッドの投稿への答えは、DOCTYPEがHTML5であることを確認することであり、Quirksではありませんでした。
私は現在、ウェブサイトの再設計を終えており、はい、それはHTML5であり、正しいDOCTYPEを持っていますが、それでもborder-radiusで奇妙な問題が発生しています。 border-radiusを適用したほとんどすべての要素に1pxのオフセットがあります。 border-radiusのチェックを外すと、問題は消えてすべて正常ですが、IE 9またはIE 10の問題ではありませんでした。IE以降_ 11数日前、この問題が表面化しました。 IE 11を使用するWindows 7とIE 11を使用するWindows 8.1の両方でテストしましたが、両方に問題があります。
例1：
ここにborder-radius: 5px 0 0 5pxがあり、先のとがった三角形を取得するために：beforeと：afterの個別の疑似要素を適用しますが、border-radiusは1pxの白い線を作成しているようなので、残りの部分とフラッシュしません。要素。これはIE 8でも問題なく機能しましたが、IE 11では機能しなくなりました。border-radiusを削除すると、疑似要素の三角形が要素と同じ高さになります。
例2：
インラインブロックとして表示される<a>リンクボタンには、背景の線形グラデーション、1pxの青い実線、border-radius: 4pxがあります。しかし、border-radiusは、1pxの青い境界線の内側に別の1pxの白い線を作成します。他のborder-radius値に関係なく、border-radiusが0でない限り、白い線が残ります。
例3：
その下の別の<a>に対して相対的に配置されたdisplay: inline-block内の<div>に設定された3つの<div>リンク要素。下部<div>にはborder-radius: 4pxがあり、上部<a>内の<div>要素には左上と右上にボーダー半径があります（図を参照）。 IE 11は、2つの<div>要素の間に1pxのギャップを表示します（上記の他のポスタースレッドに示されているように）。ただし、下部のボーダー半径<div>を0に設定すると、ギャップがなくなります。
繰り返しますが、IE 9およびIE 10では、これらのインスタンスの問題はありませんでした。 IE 11がこの「1pxギャップ」を持っているので、border-radiusを持つ要素が表示されます。修正方法がわかりません。もちろん、他のブラウザは影響を受けません。 Firefox、Safari、Opera、およびChromeはすべて正常に表示されます。
どんな助けでも大歓迎です。
私が知る限り、IE11のborder-radiusにはバグがあります。あなたが説明する問題は、全体像の一部かもしれません。 詳細 。
小数ピクセルの回避策では、Firefoxが選択したフォントサイズのクリアタイプのぼやけをピクセルに合わせて回避するため、テキストを1ピクセルずらす可能性があります。
このmsdnスレッド （投稿した場所）のオーバーフロー：非表示のラッパーによる回避策は、そのような互換性の問題が発生しにくくなる可能性があります。