2017-12-15 15 views
0

IE11にしてエッジが表示されます。幽霊のような「国境」は、次のHTML/CSSが存在してはならない奇妙な、透明の境界線を表示し、(Windowsの10の)IE11のborder-半径およびエッジ

<!DOCTYPE html><html> 
<head> 
    <style> 
     body { 
      background-color:red; 
      font-size: 10pt; 
     } 

     .menu { 
      background-color: #5f6062; 
      overflow:hidden; /* To contain floats */ 
      box-sizing: content-box; 
     } 

     .right-menu { 
      float:right; 
      margin:auto; 
      padding:0 0 0 20px; 
      list-style: none; 
     } 

     .spacer { 
      background-color: #ffffff; 
      height: 20px; 
     } 

     .content { 
      background-color: #ffffff; 
      border-radius:0 0 10px 10px; 
      background-clip: content-box; 
     } 
    </style> 
</head> 
<body> 
    <div class="menu"> 
     <ul class="right-menu"> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    <div class="spacer"></div> 
    <div class="content"> 
     <div class="content-title">There shouldn't be a 'border' above this...</div> 
    </div> 
</body> 
</html> 

JSFiddle(あなたがJSFiddleで内外に「国境」フェードを見るために、垂直をウィンドウのサイズを変更する必要があるかもしれません - 。でも、見知らぬ人である)

Screenshot of the 'border'

最も興味深いです問題はborder-radiusによって引き起こされているようです。私がそれを取り除くと、「国境」がなくなりました。他の要素(例:.menu div)を削除しても消えてしまいますが、この問題が発生したサイトの構造を混乱させたくないので、これはオプションではありません。

解決策として、background-clip: content-boxまたはpadding-boxという言葉が見つかりましたが、ここでは機能しないようです。私のデモのサイズを小さくしようとしているときに

も注目の、私はなく、プレーンなHTMLファイルで、JSFiddleで国境を示したコードになってしまいました。これは、JSFiddleとプレーンなHTMLファイルの両方で '境界線'を表示できる最小のサイズです。 EDGEのPlatform Issuesのバグを発見

まだ回避策を見つけたいと思います...

+0

A "スペーサー" 要素、本当に? title要素のパディングトップでそれを交換し、問題が消滅... – CBroe

+0

これは、要素の 'float'とは何かを持っている可能性があります。問題が解消するかどうかを確認するには、 'float:left'または' float:right'を指定してください。 私の経験では、このような要素は、ブートストラップの 'COL-MD-12'のようなグローバルなクラスを持っている持っている方がはるかに簡単です。これは、クロスブラウザスタイルをもっと簡単にします。 –

+0

@CBroe:サンプルコードで 'spacer'要素の名前が変更され、実際には実際のコードに他の要素が含まれていました:-) @BRO_THOM:Fiddleで 'float'を試しても境界線が表示されます。私はブートストラップを使用しない古いウェブサイトの外観を更新しようとしており、変更を最小限に抑えることを好みます。 – Goozak

答えて

0

それはIEがborder-radiusを表示するには、透明の境界線をレンダリングしているように見えますが、さらに下の「背景」色を選びます(私のサンプルでは、​​白の代わりに赤を使用してください)。

は、だから私は、私の実際のページで...回避策で

を行ってきました、2つの要素がこのバグを持っています。私の回避策は、で、border-radiusでもう1つの要素のbackground-colorを設定し、もう1つはと設定して、実際のborderを要素の背景のと同じ色に設定しました。

関連する問題