0

该框在 chrome、safari 和 firefox 中显示正确的颜色。但在 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>

代码：

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

4 回答 4

4

你的问题是背景属性：

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 */
于 2013-02-26T12:32:15.613 回答
4

You have specified that color for browsers without gradient support:

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

Change that to a color that works with your design:

background:#666; /* default background for browsers without gradient support */
于 2013-02-26T12:40:38.050 回答
3

add the following line before the gradient declarations:

background : #272727;

The bug happens because IE does not support gradients. Don't use filters like 

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

These filters don't respect drop-shadows and border radius.

于 2013-02-26T12:41:11.257 回答
1

IE9 does not support CSS gradients, so you are seeing the default background colour for the box after the gradients have been ignored.

The easiest answer is to give a more sensible default background style, so that browsers that don't support gradients will get a colour that comes close to matching what you want.

如果您确实想在 IE 中支持渐变，您可以使用 IE 专有filter样式来实现，但如果可能，我会避免这种情况，因为语法很糟糕，最终结果可能有问题（尤其是与其他 CSS3 样式结合使用时） ）。

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

希望有帮助。

于 2013-02-26T12:48:30.593 回答