盒子的顏色在IE9中有所不同？

該框在鉻，Safari瀏覽器和Firefox中顯示正確的顏色。但在IE中，框的顏色是黃色/金色。有關我正面臨的問題，請參閱下面的圖片。盒子的顏色在IE9中有所不同？

如何解決這個問題？

火狐： enter image description here

IE9： enter image description here

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; 
}

來源

2013-02-26 Staje Baa

偏題：''不是有效的HTML標記。 '

'是有效的，但已被棄用。你應該使用CSS來代替這兩個; 'font-weight：bold'和'text-align：center'。 – SDC 2013-02-26 12:43:24

請參閱下面的答案：http://stackoverflow.com/a/15089230/1317805。你接受的答案建議爲IE9使用固定的顏色，但IE9支持使用'filter'的漸變（就像IE6,7和8一樣！）。 – 2013-02-26 12:48:52

你已經指定顏色的瀏覽器沒有漸變蘇pport：

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

改變，要與你的設計作品顏色：

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

來源

2013-02-26 12:40:38 Guffa

This works thanx – 2013-02-26 12:45:00

我不知道爲什麼這個答案被接受。 IE9支持漸變。看到我的答案如下：http://stackoverflow.com/a/15089230/1317805 – 2013-02-26 12:45:39

@JamesDonnelly：是的，你也可以添加對許多瀏覽器的漸變支持，但是這可以解決主要問題，即橙色背景。 – Guffa 2013-02-26 12:49:51

你的問題是背景屬性：

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。歌劇。

如果你想在所有支持的瀏覽器使用漸變背景，這是一個相當真棒資源：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 */

.. 。你想要：

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 */

來源

2013-02-26 12:32:15

'過濾器'樣式是越野車和使用尷尬。如果你必須在IE中做漸變，使用CSS3Pie。 – SDC 2013-02-26 12:49:39

@SDC擺動和迴旋處。 CSS3Pie很慢。 – Blowsie 2013-02-26 12:50:24

@Blowsie - 根據我的經驗，CSS3Pie在大多數使用情況下都具有可接受的性能。如果你擔心性能，只需將IE9的漸變完全降低即可。 'filter'的錯誤更糟糕。 – SDC 2013-02-26 12:51:05

梯度聲明之前添加以下行：

background : #272727;

的錯誤是因爲IE不支持漸變。不要使用濾鏡一樣

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

這些過濾器不尊重下拉陰影和邊界半徑。

來源

2013-02-26 12:41:11

IE9不支持CSS漸變，所以在漸變被忽略之後，您會看到該框的默認背景色。

最簡單的答案是給出更合理的默認background樣式，以便不支持漸變的瀏覽器將獲得接近匹配所需的顏色。

如果你想支持梯度IE，你可以使用IE專有filter風格去做，但語法是可怕的，最終的結果可能是越野車（用於尤其是當我想如果可能避免這種情況與其他CSS3樣式結合）。

更好的解決方案是使用CSS3Pie庫來修補IE以添加對CSS3樣式漸變的支持。 CSS3Pie適用於IE（6-9）的所有版本，並在IE9中添加了漸變效果，漸變效果，方塊陰影效果和邊框半徑效果。這將允許您使用漸變正確支持IE9。

希望有所幫助。

來源

2013-02-26 12:48:30 SDC

盒子的顏色在IE9中有所不同？

回答

相關問題