Question

该框在chrome，safari和firefox中显示正确的颜色。但在IE中，盒子的颜色是黄色/金色。请参阅下面的图片，了解我遇到的问题。

如何解决这个问题？

火狐： enter image description here

IE9： enter image description here

JSFIDDLE（在IE中打开此示例）

HTML CODE：

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

Answer 1

您的问题是背景属性：

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-*定位Opera。

如果您想在所有支持的浏览器中使用渐变背景，这是一个非常棒的资源：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 */

Answer 2

您为没有渐变支持的浏览器指定了该颜色：

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

将其更改为适合您设计的颜色：

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

Answer 3

在渐变声明之前添加以下行：

background : #272727;

发生错误是因为IE不支持渐变。不要使用像

这样的过滤器

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

这些滤镜不考虑阴影和边框半径。

Answer 4

IE9不支持CSS渐变，因此在忽略渐变后，您会看到框的默认背景颜色。

最简单的答案是提供更合理的默认background样式，以便不支持渐变的浏览器会获得接近您想要的颜色。

如果你想在IE中支持渐变，你可以使用IE专有的filter样式来做，但是如果可能的话我会避免这种情况，因为语法很糟糕，最终的结果可能是错误的（特别是与其他CSS3样式一起使用时。）

更好的解决方案是使用CSS3Pie库修补IE以添加对CSS3样式渐变的支持。 CSS3Pie适用于所有版本的IE（6-9），并为IE9添加渐变，渐变，框阴影和边框半径为IE 6-8。这将允许您使用渐变来正确支持IE9。

希望有所帮助。

IE9的盒子颜色有所不同？

4 个答案: