IE不应用于css中的背景图像定义
IE不应用于css中的背景图像定义
提问于 2014-01-13 17:29:04
IE (测试7-10)没有将基(绝对URL)应用于样式标记中的背景图像，从而导致404。只有在使用innerHTML注入代码时才会发生这种情况(这是属于更大应用程序的需求)。它将基应用于所有其他元素，如本例所示。
有什么建议吗？
编辑2014/01/13这是固定的，如果我从HTML中删除样式标记并手动将它们附加到标头中。想知道这是否是唯一的答案。基于此解决方案： tag with Javascript
<!DOCTYPE html>
<html>
<head>
<title>base test</title>
<base href="http://absoluteurl.com/">
</head>
<body>
<div id="container"></div>
</body>
<script>
var html = "First Node<br>Second Node.<br><style>#bkgdiv {background-image: url(media/ex_amp.jpg); border: 1px solid #f00; width: 200px; height: 200px;}</style><div id=\"bkgdiv\">DIV w/ Background</div><br><img src=\"media/ex_amp.jpg\">";
document.getElementById('container').innerHTML = html;
</script>
</html>回答 2
Stack Overflow用户
发布于 2014-01-13 17:49:32
你试过jQuery appendTo方法了吗？
Stack Overflow用户
发布于 2014-01-14 16:52:41
内联样式元素必须从HTML字符串中删除，添加到样式元素对象中，然后追加到头部。
<!DOCTYPE html>
<html>
<head>
<title>base test</title>
<base href="http://absoluteurl.com/">
</head>
<body>
<div id="container"></div>
</body>
<script>
var html = "First Node<br>Second Node.<br><style>#bkgdiv {background-image: url(media/ex_amp.jpg); border: 1px solid #f00; width: 200px; height: 200px;}</style><div id=\"bkgdiv\">DIV w/ Background</div><br><img src=\"media/ex_amp.jpg\">";
var head = document.getElementsByName('head')[0];
content.html = content.html.replace(/<style(.|\n)*?>(.|\n)*?<\/style>/ig, function(match) {
var css = match.replace(/<\/?style(.|\n)*?>/ig, "");
style = document.createElement('style');
style.type = 'text/css';
if(style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
return "";
});
document.getElementById('container').innerHTML = html;
</script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21097607
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号