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で内外に「国境」フェードを見るために、垂直をウィンドウのサイズを変更する必要があるかもしれません - 。でも、見知らぬ人である)
最も興味深いです問題はborder-radius
によって引き起こされているようです。私がそれを取り除くと、「国境」がなくなりました。他の要素(例:.menu div)を削除しても消えてしまいますが、この問題が発生したサイトの構造を混乱させたくないので、これはオプションではありません。
解決策として、background-clip: content-box
またはpadding-box
という言葉が見つかりましたが、ここでは機能しないようです。私のデモのサイズを小さくしようとしているときに
も注目の、私はなく、プレーンなHTMLファイルで、JSFiddleで国境を示したコードになってしまいました。これは、JSFiddleとプレーンなHTMLファイルの両方で '境界線'を表示できる最小のサイズです。 EDGEのPlatform Issuesのバグを発見
まだ回避策を見つけたいと思います...
A "スペーサー" 要素、本当に? title要素のパディングトップでそれを交換し、問題が消滅... – CBroe
これは、要素の 'float'とは何かを持っている可能性があります。問題が解消するかどうかを確認するには、 'float:left'または' float:right'を指定してください。 私の経験では、このような要素は、ブートストラップの 'COL-MD-12'のようなグローバルなクラスを持っている持っている方がはるかに簡単です。これは、クロスブラウザスタイルをもっと簡単にします。 –
@CBroe:サンプルコードで 'spacer'要素の名前が変更され、実際には実際のコードに他の要素が含まれていました:-) @BRO_THOM:Fiddleで 'float'を試しても境界線が表示されます。私はブートストラップを使用しない古いウェブサイトの外観を更新しようとしており、変更を最小限に抑えることを好みます。 – Goozak