当浏览器不支持 CSS 样式但属性支持时会发生什么？答案

【问题标题】：What happens when a CSS style isn't supported by the browser, but the property is?当浏览器不支持 CSS 样式但属性支持时会发生什么？
【发布时间】：2014-04-22 18:32:58
【问题描述】：

我想知道如果为浏览器支持的属性提供了 CSS 样式，但样式本身不受支持，会发生什么情况。

以IE8中的如下为例；

background: url(../path/to/img.png);
background: rgba(0,0,0,0.8);

IE8 是否会因为不支持 CSS3 颜色而直接忽略第二种样式？

谢谢:)。

【问题讨论】：

你自己试试看吧？

标签： css internet-explorer-8 cross-browser

【解决方案1】：

IE8 是否会因为不支持 CSS3 颜色而直接忽略第二种样式？

答案是YES，它会完全忽略该值，因此它不会渲染任何颜色，通常的做法是使用带有十六进制值的后备

.class_name {
    background: #000;
    background: rgba(0,0,0,.5);
}

所以，当你写两次background 时，这是完全有效的，理解rgba() 的浏览器会渲染一个不透明的背景，但不理解的浏览器 rgba() 将使用 #000。

不过，有多种解决方法，例如，您可以使用:before 或:after，将filter 属性与负z-index 一起使用，可以用作不透明背景，或者您可以这样做即，仅对 IE8 使用普通的 1x1 px 不透明 png 图像。

例如

background: url("IMAGE_URL_HERE")\9; /* Targets IE8 and below */

【讨论】：