web-dev-qa-db-ja.com

IE9境界半径と背景のグラデーションブリーディング

IE9は、border-radiusのCSS3標準定義を使用することで、角の丸い部分を処理できるようです。

境界半径and背景のグラデーションのサポートはどうですか？はい、IE9は両方を別々にサポートしますが、2つを混ぜると、角が丸くなってグラデーションがにじみます。

また、角が丸いボックスの下に黒い実線で影が表示されるという奇妙さも見ています。

IE9に表示される画像は次のとおりです。

image with no bleed, but sharp cornersimage with bleed

この問題を回避するにはどうすればよいですか？

internet-explorer-9gradientcompass-sasscss3
191
SigmaBetaTooth

これは、背景のグラデーションを追加する1つのソリューションです。データURIを使用して、任意の背景色をオーバーレイする半透明の画像を作成します。 IE9で境界線の半径に正しくクリップされていることを確認しました。これはSVGベースの提案よりも軽量ですが、欠点として、解像度に依存しません。別の利点：現在のHTML/CSSで機能し、追加の要素でラップする必要がありません。

ウェブ検索でランダムな20x20グラデーションPNGを取得し、オンラインツールを使用してデータURIに変換しました。結果のデータURIは、そのすべてのSVG混乱のCSSコードよりも小さく、SVG自体よりはるかに小さくなります！ （条件付きスタイル、ブラウザ固有のcssクラスなどを使用してのみ、これをIE9に条件付きで適用できます。）もちろん、PNGの生成は、ボタンサイズのグラデーションには適していますが、ページサイズのグラデーションには適していません。

HTML：

<span class="button">This is a button</span>

CSS：

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}
49
Steve Eisner

私もこの問題に取り組んできました。もう1つの「解決策」は、グラデーションと丸い角を持つアイテムの周りにdivを追加することです。 divの高さ、幅、角の丸みを同じ値にします。オーバーフローを非表示に設定します。これは基本的にマスクにすぎませんが、私には有効です。

HTML：

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS：

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}
104
user740128

多くの場合、インセットボックスシャドウを使用して、グラデーション効果を「偽造」し、IE9のいエッジを回避できることに言及する価値があると思います。これはボタンで特にうまく機能します。

この例を参照してください： http://jsfiddle.net/jancbeck/CJPPW/31/

Comparison of a button style with either linear gradient or box-shadow

44
Jan Beck

CSS3 PIEを使用してこの問題を解決することもできます。

http://css3pie.com/

もちろん、丸い角と背景のグラデーションを持つ単一の要素に依存している場合、それはやり過ぎかもしれませんが、多くの一般的なCSS3機能をページに組み込み、簡単なサポートが必要かどうかを検討するオプションですIE6 +用

8
Louis L.

私もこのバグに遭遇しました。私の提案は、ie9のグラデーションに繰り返し背景画像を使用することです。 IE9は、丸みを帯びた境界線の後ろに画像を正しくタイル表示します（RC1時点）。

CSSの1行を置き換えるために100行のコードを書くのがいかにシンプルでエレガントなのかがわかりません。 SVGはクールですべてですが、グラデーション背景の簡単なソリューションが何年も前から存在しているのに、なぜそれをすべて体験するのでしょうか。

7
MikeP

また、IEが一度に両方の境界半径と勾配をレンダリングできないことがわかった同じ問題で立ち往生しました。両方が競合します。この頭痛を解決する唯一の方法は、フィルターを削除して使用することですIEのみのsvgコードによる勾配.

microsoftのこのサイト（特にsvgへのグラデーション用）からグラデーションカラーコードを使用してsvgコードを取得できます。

http://ie.Microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

楽しい ：）

5
Himanshu Jani

IE9の半径をクリップするには、ラッパーdiv（丸め＆オーバーフロー非表示）を使用します。シンプルで機能するクロスブラウザ。 SVG、JS、および条件付きコメントは不要です。

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}
5
Brian Lewis

IE9は、ボーダー半径とグラデーションを適切に一緒に処理します。問題は、IE9がフィルターを適切にレンダリングすることですに加えて勾配。これを適切に解決する方法は、フィルタープロパティを使用するスタイル宣言でフィルターを無効にすることです。

これを最適に解決する方法の例として：

メインスタイルシートにボタンクラスがあります。

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

条件付きIE9スタイルシートの場合：

.btn { filter: none; }

IE9スタイルシートがあなたの頭で参照されている限りafterメインスタイルシートはこれで完璧に機能します。

4
WFendler

このブログ投稿は私を助けました： http://abouthalf.com/2010/10/25/internet-Explorer-9-gradients-with-rounded-corners/

基本的に、条件付きコメントを使用してフィルターを削除し、背景画像として使用できるグラデーションのSVG「スプライト」を作成します。

シンプルでエレガント！

4
Dan Herd

IE9でたった1つの要素で動作させる簡単な方法があります。

このフィドルを見てください：http://jsfiddle.net/bhaBJ/6/

最初の要素はBorder-Radiusを設定します。 2番目の擬似要素は、背景のグラデーションを設定します。

いくつかの重要な指示：

  • 親にはrelativeまたは絶対位置が必要です
  • 親にはoverflowが必要です：hidden; （境界半径効果が見えるようにするため）
  • :: before（または:: after）疑似要素にはz-indexが必要です：-1（回避策の種類）

基本要素の宣言は次のようになります。

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

疑似要素宣言：

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}
3
Marakoss

このバグを回避するために、IE9の角を丸くしないようにすることにしました。クリーンで使いやすく、汎用性があります。

{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}
2
key_

IE9のマスクdivは良いアイデアです。少しわかりやすくするために、いくつかの完全なコードを提供しています。 DIVでボタンをラップすることに満足していませんが、PNGマスクを埋め込むか、SVGを使用してすべての作業を行うよりも理解しやすいと思います。たぶんIE 10はそれを適切にサポートするでしょう。

<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
 background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
 float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
 padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
 text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
 border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
 -moz-box-shadow:0px 0px 0px rgb(0,0,0);
 -webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
 background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
 background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>
1
underdog
background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */

私にこれをしていましたが、「filter：」行を削除すると、出血はなくなりました。さらに、PIEを使用します。

出血：

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

出血しない：

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

クイックIEシャドウ修正：

fixBoxShadowBlur($('*'));

function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
    jQueryObject.each(function(){
        boxShadow = $(this).css('boxShadow');
        if(boxShadow != 'none'){
            var bsArr = boxShadow.split(' ');
            bsBlur = parseInt(bsArr[2]) || 0;
            bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
            bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
            $(this).css('boxShadow', bsArr.join(' '));
        }
    });
}

}

1
Shawn Rebelo

shadowを使用して勾配を実現でき、border-radiusを使用してInternet Explorer 9で動作します。

このようなもの：

box-shadow: inset 0px 0px 26px 5px gainsboro;
1
Rajesh

コンパスとサスを使用すると、次のように簡単にこれを実現できます。

@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }

CompassはSVG画像を生成します。

そのようです：

#gradiant {
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e),   color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);

}

/* line 28, ../sass/boxshadow.scss */
#border-radius {
 -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
   border-top-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  border-bottom-right-radius: 8px;

}

0
raam86

私のために働く...

<!--[if gte IE 9]>
  <style type="text/css">
  .gradient{
   filter: ;
}
</style>

cSS

border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color-    stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+     */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db',     endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);
0
user2132041

これが1回限りか有効な回避策かどうかはわかりませんが...

Border-radiusがborder widthよりも大きければ、問題は発生しませんでした。それらが同じだったとき、私は四隅を手に入れていました。

0
daddywoodland