IE不适用于动态加载的CSS

Question

似乎IE（至少旧版本）不应用动态加载的CSS。 如果您通过ajax将包含CSS的页面加载到“lightbox”或“colorbox”中，这可能是一个痛点。

例如，假设您的HTML页面有一个名为“taco”的div：

<style>#taco {color:green;}</style>
<div id="taco">Hola Mundo!</div>

“Hola Mundo！” 由于CSS包含在原始HTML页面中，因此将为绿色。 然后一些Javascript发生并将其附加到“taco”：

<style>#taco {color:green;}</style>
<div id="taco">
  Hola Mundo!
  <style>#burrito {color:red;}</style>
  <span id="burrito">mmmm burrito</span>
</div>

在除IE之外的所有浏览器中，burrito的字体将为红色。

那么有没有办法在IE中这样做？ 好像没有。

Answer 1

style标记仅允许在head部分中使用。 将它放在其他地方根本就是无效的，这与IE无关。

更多信息 。

顺便说一下 ，如果你不能将样式放在一个全局样式表中来解决你的问题，你可以使用'style'属性来修改元素：

<p style="...">

或者你可以使用iframe但是你必须提供整个页面而不是几个标签。

Answer 2

您可能希望开始使用jQuery的.CSS methed进行动态样式更改。

$("#jane").css('color', '#0F0');

或者只是简单的jane Javascript：

document.getElementById['sally'].style.color = '#0F0';

编辑：

你的ajax注入了这个：

<div id="jane">        
    <div id="sally">Hi, I'm Sally!</div>
    <script>document.getElementById['sally'].style.color = '#0F0';</script>
</div>

或者为什么不直接使用内联样式计算服务器端注入元素？：

<div id="jane">        
    <div id="sally" style="color:#0F0">Hi, I'm Sally!</div>
</div>

Answer 3

如果没有办法做到这一点，并且您不想更改服务器端代码，则可以使用以下非常简单的样式元素：

// In the callback function, let's assume you're using jQuery
success: function( data ) {

    // Create a dummy DOM element
    var el = document.createElement( 'div' );

    // Add the html received to this dummy element
    el.innerHTML = data;

    // so that you can select its html:
    var s = $( 'style', el ).text();

    // Delegate to another function, it's going to get messy otherwise
    addRules( s );
}

function addRules( s ) {
    // First, separate your strings for each line
    var lines = s.split( '\n' ),

    // Declare some temporary variables
        id,
        rule,
        rules;

    // Then, loop through each line to handle it
    $.each( lines, function() {
        id = $( this ).split( ' ' )[ 0 ];

        // Get the rules inside the brackets, thanks @Esailija
        rules = /\{\s*([^}]*?)\s*\}/.exec( $( this ) )[ 1 ];

        // Split the rules
        rules = rules.split( ';' );

        $.each( rules, function() {
            rule = $( this ).split( ':' );

            // Apply each rule to the id
            $( id ).css( $.trim( rule[ 0 ] ), $.trim( rule[ 1 ] ) );
        } );
    } );
}

所以，是的，基本上我正在制作一个CSS解析器。

这是一个非常基本的解析器。

它将仅解析以下规则：

#some-id { some: rule; another: rule; }
#other-id { some: rule; yet: another; rule: baby; }

Answer 4

如果将动态链接样式表（通过AJAX）加载到网页中，IE <8甚至无法识别LINK标记。

如果动态加载SCRIPT标记，IE <8将不会解析它。

Jeron是正确的，动态加载HTML并设置样式的唯一方法是通过iframe，但我正在测试回流容器的想法。