Html IE9中盒子的颜色不同？

该框在chrome、safari和firefox中显示正确的颜色。但在IE中，盒子的颜色是黄色/金色。有关我面临的问题，请参见下面的图片

如何解决这个问题

火狐：

IE9：

在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>

---

您的问题是背景属性：

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-*针对IE不支持的webkit浏览器。 -moz-*以Mozilla Firefox为目标。 -o-*目标是歌剧院

如果您想在所有支持的浏览器中使用渐变背景，这是一个非常棒的资源：

将其与您的颜色一起使用，例如，您想要的泡泡外层：

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

…对于bubbleinner，您希望：

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

---

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

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

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

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

---

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

background : #272727;

该错误的发生是因为IE不支持渐变。 不要像这样使用过滤器

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

---

这些过滤器不考虑投影和边界半径

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

最简单的答案是提供一个更合理的默认背景样式，这样不支持渐变的浏览器将获得与您想要的颜色接近的颜色

如果你真的想在IE中支持渐变，你可以使用IE专有的过滤器样式来实现，但是如果可能的话，我会避免这样做，因为语法很糟糕，最终的结果可能是有缺陷的，尤其是当与其他CSS3样式结合使用时

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

---

希望有帮助。

主题外：不是有效的HTML标记。和有效，但已弃用。你应该使用CSS来代替这两个；字体大小：粗体，文本对齐：居中。请参见下面我的答案：。您接受的答案是建议IE9使用固定颜色，但IE9支持渐变，就像IE6、7和8一样！使用过滤器。我不知道为什么这个答案被接受。IE9支持渐变。请看下面我的回答：@JamesDonnelly:是的，您还可以为许多浏览器添加对渐变的支持，但这解决了主要问题，即橙色背景。过滤器样式有缺陷，使用起来很不方便。如果您必须在IE中进行渐变，请使用CSS3。@SDC秋千和环岛。CSS3Pie很慢。@Blowsie-根据我的经验，CSS3Pie在大多数用例中都有可以接受的性能。如果您担心性能，只需完全放弃IE9的渐变。过滤器的错误更严重。@SDC:filter在没有JavaScript的情况下工作。在IE中使用filter之前我没有遇到过任何问题，你能举一个bug的例子吗？@JamesDonnelly true，但它使用directX都有性能方面的考虑，但对我来说，要么使用filter，要么不使用支持，这是一条路要走