IE 未将基础应用于 CSS 中的背景图像定义答案

【问题标题】：IE not applying base to background image definitions in cssIE 未将基础应用于 CSS 中的背景图像定义
【发布时间】：2014-02-01 13:43:24
【问题描述】：

IE（测试 7-10）没有将基础（绝对 URL）应用于样式标记内的背景图像，导致 404。这仅在使用 innerHTML 注入代码时发生（这是大型应用程序的要求）属于）。如示例中所示，它将基础应用于所有其他元素。

有什么建议吗？

Edit 2014/01/13 如果我从 HTML 字符串中删除样式标签并手动将它们附加到标题中，则会修复此问题。想知道这是否是唯一的答案。基于此解决方案：How to create a <style> 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>

【问题讨论】：

标签： javascript css base

【解决方案1】：

内联样式元素必须从 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>

【讨论】：

【解决方案2】：

你试过 jQuery appendTo 方法吗？

【讨论】：

jQuery 存在更大的问题，使我们无法使用它，即使在整个应用程序中都使用了该库。