ie9 background 不显示

新项目 要求兼容到 ie9 及以上，因为 ie9 相对于css 新特性的支持不错，所以很少遇到需要hack 的属性。

在登陆页 添加一个 全屏的背景图片，div 的设置如下：

.webbox{
    width: 100%;
    height:100%;
    background:transparent url(login_bg.jpg) no-repeat center;
    background-size: cover;
}

然后在chrome和火狐上都是显示正常的，然而在 ie9 上 却显示不出来。这就排除了路径及写法的问题。

background 属性 基本不存在兼容性问题，我在网上搜索了以下，基本遇到这种问题的都是 通过改变 图片的格式解决的，

但是我把jpg、jpeg、gif、png 几种格式都试了一遍，依然不显示，所以也不是 格式的问题。

 

最后发现，当把div 的height 属性修改为固定的px单位 时，可以显示。

 

即 单位为 百分比的时候 ，无论值为多少，背景图片都无法显示。于是 用下列思路：

body{
    overflow:hidden\9!important; /*ie8,9 识别的*/
}

.webbox{
    width: 100%;
    height:100%;
    height:1000px\9!important; /*ie8,9 识别的*/
    background:transparent url(login_bg.jpg) no-repeat center;
    background-size: cover;
}

加入 ie9 才能识别的 \9 后缀，以及添加 ！important 后缀变为最大优先级，将其他配置覆盖。

最后图片成功出现。

另外ie9 以下 的 div 的 宽度不包含 padding，所以设置padding时，顺便设置 box-sizing = border-box; 将宽度包含padding；