html - IE9で箱の色が違う？

Question

ボックスは、クロム、サファリ、およびファイアフォックスで正しい色を示しています。しかし IE では、ボックスの色はイエロー/ゴールドです。私が直面している問題については、下の写真を参照してください。

これを修正する方法は？

ファイアフォックス: ここに画像の説明を入力

IE9: ここに画像の説明を入力

JSFIDDLE (この例を IE で開く)

HTML コード:

<div id="container105">
        <div class="bubbleouter">
            <div class="bubbleinner"><CENTER><BOLD>VUL KOSTENLOOS DE OFFERTE IN EN WIJ BEREKEN DE PRIJS VAN UW SPECIFIEKE RIT<BOLD></CENTER></div>
        </div>
    </div>

CSS コード:

}
.bubbleouter {
    position:relative;
    padding:3px;
    margin:0;
        width:280px;
        z-index:99;
        background:-webkit-gradient(linear, left top, left bottom, from(#272727), to(#222222));
    background:-moz-linear-gradient(top, #272727, #222222);
    background:-o-linear-gradient(top, #272727, #222222);


    /* css3 */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

.bubbleouter:after {
    content:"";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    top:-13px; /* value = - border-top-width - border-bottom-width */
    left:50%; /* controls horizontal position */
        margin:0 0 0 -18px;
    width:0;
    height:0;
        z-index:99;
    border-width:0 18px 14px; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#222222 transparent;
}

.bubbleinner {
    position:relative;
    padding:15px;
    margin:0;
    color:#eee;
        text-align:center;
        z-index:100;
    text-shadow:0px -1px 1px rgba(0, 0, 0, 0.8);
    background:#f3961c; /* default background for browsers without gradient support */
        border-top:1px solid #666666;

    /* css3 */
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    /* NOTE: webkit gradient implementation is not as per spec */
    background:-webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444));
    background:-moz-linear-gradient(top, #666666, #444444);
    background:-o-linear-gradient(top, #666666, #444444);
}



.bubbleinner:after {
    content:"";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    top:-13px; /* value = - border-top-width - border-bottom-width */
    left:50%; /* controls horizontal position */
        margin:0 0 0 -16px;
    width:0;
    height:0;
        z-index:99;
    border-width:0 16px 12px; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#666666 transparent;
}

score 4 · Accepted Answer

あなたの問題は背景属性です:

background:-webkit-gradient(linear, left top, left bottom, from(#272727), to(#222222));
background:-moz-linear-gradient(top, #272727, #222222);
background:-o-linear-gradient(top, #272727, #222222);

-webkit-*Webkit ブラウザーを対象としています (IE はそうではありません)。 -moz-*Mozilla Firefox を対象としています。 -o-*オペラを対象としています。

サポートされているすべてのブラウザーでグラデーションの背景を使用したい場合、これは非常に素晴らしいリソースです: http://www.colorzilla.com/gradient-editor/

.bubbleouterあなたが望むように、あなたの色でそれを使用してください：

background: #272727; /* Old browsers */
background: -moz-linear-gradient(top, #272727 0%, #222222 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#272727), color-stop(100%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #272727 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #272727 0%,#222222 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #272727 0%,#222222 100%); /* IE10+ */
background: linear-gradient(to bottom, #272727 0%,#222222 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#222222',GradientType=0 ); /* IE6-9 */

...そしてbubbleinnerあなたが望むなら：

background: #666666; /* Old browsers */
background: -moz-linear-gradient(top, #666666 0%, #444444 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#444444)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#444444 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#444444 100%); /* IE10+ */
background: linear-gradient(to bottom, #666666 0%,#444444 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#444444',GradientType=0 ); /* IE6-9 */

score 4 · Accepted Answer

グラデーションをサポートしていないブラウザーにその色を指定しました:

background:#f3961c; /* default background for browsers without gradient support */

それをあなたのデザインに合った色に変更してください：

background:#666; /* default background for browsers without gradient support */

score 3 · Accepted Answer

グラデーション宣言の前に次の行を追加します。

background : #272727;

このバグは、IE がグラデーションをサポートしていないために発生します。次のようなフィルターを使用しないでください

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#222222',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

これらのフィルターは、ドロップシャドウと境界線の半径を考慮しません。

score 1 · Accepted Answer

IE9 は CSS グラデーションをサポートしていないため、グラデーションが無視された後にボックスのデフォルトの背景色が表示されます。

最も簡単な答えは、より適切なデフォルトbackgroundスタイルを指定することです。これにより、グラデーションをサポートしていないブラウザーでも、希望する色に近い色が得られます。

IE でグラデーションをサポートしたい場合は、IE 独自のfilterスタイルを使用してそれを行うことができますが、構文がひどいものであり、最終結果にバグが発生する可能性があるため (特に他の CSS3 スタイルと組み合わせて使用する場合)、可能であればこれを避けます。）。

より良い解決策は、CSS3Pieライブラリを使用して IE にパッチを適用し、CSS3 スタイルグラデーションのサポートを追加することです。CSS3Pie は IE のすべてのバージョン (6-9) で動作し、IE9 にグラデーションを追加し、IE 6-8 にグラデーション、ボックスシャドウ、境界線の半径を追加します。これにより、グラデーションで IE9 を適切にサポートできます。

それが役立つことを願っています。

html - IE9で箱の色が違う？

4 に答える 4

Related

Reference