使用 Javascript 呈现时，外部 CSS 在 IE 上被剥离答案

【问题标题】：external CSS is being stripped on IE when rendered using Javascript使用 Javascript 呈现时，外部 CSS 在 IE 上被剥离
【发布时间】：2012-04-04 16:03:06
【问题描述】：

我在下面有这段代码，它通过 Javascript 在网站上呈现：

<div id="rs_overlay">
  <link type="text/css" rel="stylesheet" media="screen" href="CSS URL HERE">
  <div id="rs_content">

      <div id="rs_images">
        <div class="left">
          <div class="rs_image">
            <img height="161" src="http://www.dwellstudio.com/media/upload/image/35a1zki.jpg">
          </div>
        </div>
        <div class="rs_clear">
      <div>

  </div>
</div>

覆盖布局在 webkit 和 moz 浏览器和 IE9 上运行良好，但在 IE8 和 IE7 上却失败了，因为

<link type="text/css" rel="stylesheet" media="screen" href="CSS URL HERE">

在 IE7/8 上被剥离。

除了内联 css 有什么想法吗？

【问题讨论】：

<link> 可能只出现在 <head> 块中，而不是随机出现在文档正文中。因此，您的 html 是无效的，并且对于更改，IE 正在做正确的事情来忽略它。
而这与RoR无关。

标签： javascript internet-explorer

【解决方案1】：

正如 Marc B 评论的那样，<link> 标签应该放在<head> 中。您的脚本应该创建 <link> 元素并将其附加到那里。

例子：

var head = document.getElementsByTagName('head').item(0);
var elem = document.createElement('link');
elem.type = 'text/css';
elem.rel = 'stylesheet';
elem.href = "CSS URL HERE";
head.appendChild(elem);

【讨论】：