IE8 多背景兼容性BUG

在使用CSS3 Multi-background特性时,为了做到平稳退化,需要做一个单背景的退化版本,如下:

background-image: url("assets/content-bg.png");
background-image: url("assets/content-bg.png"), -webkit-gradient(linear, left top, left bottom, from(#E5EDED), to(white), color-stop(0.1, white)); /* iOS */
background-image: url("assets/content-bg.png"), linear-gradient(to bottom, #E5EDED, white 52px);

这样在支持多背景的浏览器中,第一行的设定会被第二行或第三行覆盖。在IE8下测试会发现,一个背景都没有。查看开发人员工具后发现浏览器接受了第三行的设定,将其解析为:

background-image: url("assets/content-bg.png), linear-gradient(to bottom, #E5EDED, white 52px");

这显然是错误的代码,修复方法也很简单,这种错误解析仅在background-image中存在,将background-image改为background即可解决问题,即:

background: url("assets/content-bg.png");
background: url("assets/content-bg.png"), -webkit-gradient(linear, left top, left bottom, from(#E5EDED), to(white), color-stop(0.1, white)); /* iOS */
background: url("assets/content-bg.png"), linear-gradient(to bottom, #E5EDED, white 52px);

注意background的其他属性要放在这些代码的后面以便覆盖。