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无关。

More information

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

<p style="...">

或者您可以使用iframe，但是您必须提供整页而不只是一些标签。

Answer 2

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

$("#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＆lt; 8甚至不识别LINK标签。

如果您动态加载SCRIPT标记IE＆lt; 8不会解析它。

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

IE不适用于动态加载的CSS

4 个答案: