新項(xiàng)目 要求兼容到 ie9 及以上，因?yàn)?ie9 相對(duì)于css 新特性的支持不錯(cuò)，所以很少遇到需要hack 的屬性。

在登陸頁(yè) 添加一個(gè) 全屏的背景圖片，div 的設(shè)置如下：

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

然后在chrome和火狐上都是顯示正常的，然而在 ie9 上 卻顯示不出來(lái)。這就排除了路徑及寫法的問(wèn)題。

background 屬性 基本不存在兼容性問(wèn)題，我在網(wǎng)上搜索了以下，基本遇到這種問(wèn)題的都是 通過(guò)改變 圖片的格式解決的，

但是我把jpg、jpeg、gif、png 幾種格式都試了一遍，依然不顯示，所以也不是 格式的問(wèn)題。

?

最后發(fā)現(xiàn)，當(dāng)把div 的height 屬性修改為固定的px單位 時(shí)，可以顯示。

?

即 單位為 百分比的時(shí)候 ，無(wú)論值為多少，背景圖片都無(wú)法顯示。于是 用下列思路：

body{overflow:hidden\9!important; /*ie8,9 識(shí)別的*/ }.webbox{width: 100%;height:100%;height:1000px\9!important; /*ie8,9 識(shí)別的*/background:transparent url(login_bg.jpg) no-repeat center;background-size: cover; }

加入 ie9 才能識(shí)別的 \9 后綴，以及添加 ！important 后綴變?yōu)樽畲髢?yōu)先級(jí)，將其他配置覆蓋。

最后圖片成功出現(xiàn)。

另外ie9 以下 的 div 的 寬度不包含 padding，所以設(shè)置padding時(shí)，順便設(shè)置 box-sizing = border-box; 將寬度包含padding；

轉(zhuǎn)載于:https://www.cnblogs.com/RoadAspenBK/p/9513122.html

總結(jié)

以上是生活随笔為你收集整理的ie9 background 不显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。