2014-01-13 3 views
0

IE (протестировано 7-10) не применяет базовый (абсолютный URL) к фоновым изображениям в теге стиля, что приводит к 404. Это происходит только тогда, когда код вводится используя innerHTML (требование большего приложения, к которому это относится). Он применяет базу ко всем другим элементам, как показано в примере.IE не применяет определения базового изображения для фона в css

Любые предложения?

Редактировать 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> 

ответ

0

Вы пробовали appendTo метод JQuery?

+0

Есть большие проблемы с jQuery, которые мешают нам от нас, даже через библиотеку, используется во всем приложении. – scader

0

Элементы стиля внутри строки должны быть удалены из строки 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> 
Смежные вопросы