ie8不拾取背景颜色答案

【问题标题】：ie8 not picking up background colourie8不拾取背景颜色
【发布时间】：2017-11-02 22:11:36
【问题描述】：

我有一个带有自定义模板的 Joomla3 网站，在大多数浏览器中看起来不错，但在 IE8 中却很糟糕。很多元素似乎没有拾取背景颜色，只是白色。

例如，页脚通常有背景颜色。当我查看 template.css 文件（从引导程序和我的自定义 template.less 文件编译）时，您可以看到页脚格式

.footer  .container {
  padding: 5px;
  border: 3px solid #bbbbbb;
  padding-top: 0px;
  border-top: 0px;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
  background-color: rgba(245,248,250,0.7);
}

但是当我使用 ie8 的网站开发工具（通过我的 mac 上的 wine - 以防万一有所不同）来检查为什么它在 ie8 中只是白色时，我看到了

这似乎表明 .footer .container 的背景颜色只是被忽略了。为什么会这样？是不是因为被less编译器编译成了rgba格式？

非常感谢您对此提供的任何帮助以及我如何解决它。

【问题讨论】：

标签： css twitter-bootstrap internet-explorer-8 less joomla3.0

【解决方案1】：

IE8 不支持 CSS3 颜色，例如 rgba()，这就是它不起作用的原因。

如果您想在 IE8 中获得支持，则必须采用另一种方法来指定 background-color。如果您不介意失去透明度，只需使用background-color:rgb(245,248,250); 或..background-color: #F5F8FA;

见http://caniuse.com/css3-colors

【讨论】：

谢谢，这是有道理的，但我认为引导程序的全部意义在于他们的 mixins 等旨在解决这个问题并放入任何额外的“css 代码”以使其工作？
@domc 不幸的是没有。
所以我在 CSS 中添加了背景颜色，但它仍然是白色的。 .container2 包含颜色，但 IE8 似乎将其覆盖为：none transparent ...。使用一个名为 * 的类，如 tinypic.com/r/2ebqskw/5 所示。您知道为什么会发生这种情况以及为什么它会覆盖 .container2 类 css 吗？谢谢，
@domc 你可以删除导致它们变白的* 声明。或者，因为它使用!important，你必须做同样的事情。例如，声明background-color: #F5F8FA!important ..这将需要覆盖它。
感谢您的帮助，如果问题非常基本，因为以前没有处理过这些 ie8 问题，我们深表歉意。您的解决方案 1 的问题是我不知道它来自哪里，它不是来自我的 template.css 文件 - 也许它被硬编码到资源管理器中，所以不知道如何覆盖它。 2 的问题是我正在尝试使用 Less，以便我将所有颜色设置为变量，然后可以更改它们，并且 !important 似乎没有被编译。我总是可以按照您的建议进行硬编码。然而，我更喜欢不强迫我硬编码的解决方案，但也许这是不可能的？

【解决方案2】：

您可以做的是在您的网站中导入 css3.js。此 javascript 文件允许您使用 CSS3 属性，这些属性适用于通常不支持的旧浏览器。

http://imsky.github.io/cssFx/

导入后，您可以像以前一样使用以下内容：

background-color: rgba(245,248,250,0.7);

为了安全起见，我认为有一个备用方案总是好的做法，只是以防万一，就像这样：

background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);

注意，回退出现在rgba()之前

希望对你有帮助

【讨论】：

【解决方案3】：

我在企业模式下使用 IE11 时遇到了同样的问题。

我有这个样式集：

.heading {
            background-color:#f1f1ef;
            border-style:solid;
            border-color:#E4E3DD;
            border-width:1px;
        }

而且我的表格标题没有背景颜色：

<th class="heading">Test</th>

我必须手动设置属性 bgcolor 才能在企业模式下工作：

<th class="heading" bgcolor="#f1f1ef">Test</th>

【讨论】：