ie8没有拿起背景颜色

时间:2013-10-11 20:10:44

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

我有一个Joomla3网站,其自定义模板在大多数浏览器中都很好看,但在IE8中却很糟糕。很多元素似乎没有采用背景颜色,只是白色。

例如,页脚通常具有背景颜色。当我查看template.css文件(从bootstrap和我的自定义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上的葡萄酒 - 如果有所作为)来检查为什么它在ie8中只是白色,我看到了

screenshot

似乎表明.footer .container的背景色被忽略了。 为什么会这样?这是因为它被较少的编译器编译成rgba格式吗?

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

3 个答案:

答案 0 :(得分:2)

IE8不支持CSS3颜色,例如rgba(),这就是它无法正常工作的原因。

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

请参阅http://caniuse.com/css3-colors

答案 1 :(得分:1)

您可以在网站上导入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()

之前

希望这有帮助

答案 2 :(得分:0)

在企业模式下使用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>