IE 不应用动态加载的 CSS

Posted 2023-02-22

【中文标题】IE 不应用动态加载的 CSS

【英文标题】：IE doesn't apply dynamically loaded CSS

【发布时间】：2011-03-09 05:30:44

【问题描述】：

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

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

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

“你好，世界！”将是绿色的，因为 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 中做到这一点？好像没有。

【问题讨论】：

您能提供更多信息吗？是链接元素吗？一个演示会很好。

请显示一些代码。 “通过 Ajax 加载的 CSS 样式”到底是什么意思？

【参考方案1】：

如果您将链接的样式表动态（​​通过 AJAX）加载到网页中，IE

如果动态加载 SCRIPT 标签，IE

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

【参考方案2】：

如果没有办法做到这一点，并且你不想改变你的服务器端代码，这里有一个非常简单样式元素的方法：

// 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; 

【参考方案3】：

您可能想开始使用 jQuery 的 .CSS 方法来进行类似的动态样式更改。

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

或者只是 plain 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>

【讨论】：

是的，这很酷。如果 jQuery（或 w/e 库）能够识别新的 css 并自动执行此操作，那真是太棒了。

您还可以发送一个 JSON 数组，其中包含您页面所需的所有样式更改，然后使用 jQuery 来应用它们。

【参考方案4】：

style 标签只允许在head 部分中使用。放在别的地方根本就无效，和IE没关系。

More information.

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

<p style="...">

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

【讨论】：

没有人关心它是否无效。有用。即使在 IE 中（除非通过 ajax 使用，如果将其添加到头部仍然不起作用）。

我已经添加了一个可能的解决方案，但如果它无效并且不起作用，也许你应该关心 ;-)

style 属性也不适用于 IE 中动态添加的元素。

正文中的

我已经尝试过 7 和 8... 很确定像 6 这样古老的东西是不行的