IE浏览器中jquery 使用load html 的background-image不能显示的问题

106 阅读 0 评论 70 点赞

我是靠谱客的博主感性冬天，最近开发中收集的这篇文章主要介绍IE浏览器中jquery 使用load html 的background-image不能显示的问题，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2019独角兽企业重金招聘Python工程师标准>>>

在使用jquery中的load函数动态加载html页面时，html页面中带有background-image 元素。在IE浏览器中不能正确显示背景图片。比如：

<html>
<head>
<style type='text/css'>
div.role_underline{
   height: 3px;
   width: 200px;
   background-image: url('images/role_underline.png');
   background-repeat: repeat-x;
   background-position:center;
}
</style>
</head>
<body>
<div class='role_underline'></div>
</body>
</html>

当我们在IE浏览器中，使用jquery 的load函数加载上面代码时并不能看到背景图片，但是firebox浏览器显示是正常的。

如何解决：方法一：不在css中定义背景图片，在元素的style中设置。<div class='role_underline' style="background-image: url('images/role_underline.png');"></div>

方法二：在load 的回调函数中重新设置背景图片。$("div.role_under_line").css("background-image:","url('images/role_underline.png')");

注意：当我们使用jquery 动态添加带有背景图片的元素时，也需要使用这方法。

转载于:https://my.oschina.net/zhailibao2010/blog/114013