Javascript IE7和IE8无法随机加载外部脚本

一旦DOM就绪，我将动态地向头部添加

元素。然而，我在IE8和IE7中得到了不一致的结果（所有其他浏览器都可以）

每加载几次页面（缓存或未缓存），IE 7/8就会在样式表中删除一些CSS规则。1或2个动态样式表将无法加载。IE总是倾向于忽略相同的1或2个样式表，即使开发者工具栏将它们显示为添加到头部

样式表本身在最终的DOM中显示为

元素，但是它们的一些规则没有被应用（尽管每隔几次就应用它们，没有任何问题）

在我的位置上，我没有从

（CMS限制）编写代码的特权-我只能从主体动态插入，这可能是问题所在

更新：这是我用来插入样式表的代码（位于

中）：

document.observe('dom:loaded', function() { // Using Prototype.js

// Add stylesheets
// addStylesheet('cite.css', 'head'); // Contains no webfont/@font-face rules
// addStylesheet('type.css', 'head'); // Contains webfont family name references*
// addStylesheet('flex.css', 'head'); // Responsive rules with @media queries
// addStylesheet('anm8.css', 'head'); // Some minor positional CSS for home page
// addStylesheet('gothic-cite.css', 'head'); // *Contains @font-face config
// addStylesheet('stag-cite.css', 'head'); // *Contains @font-face config

addStylesheet('all.css', 'head'); // Contains ALL content from above in 1 file

function addStylesheet(cssname, pos2)
{
    var th2 = document.getElementsByTagName(pos2)[0];
    var s2 = document.createElement('link');
    s2.setAttribute('type', 'text/css');
    s2.setAttribute('href', cssname);
    s2.setAttribute('media', 'screen');
    s2.setAttribute('rel', 'stylesheet');
    th2.appendChild(s2);
}

});

正如所建议的，即使当我将所有规则组合到一个样式表中（我讨厌这样做），IE7/8仍然像一些规则所描述的那样不断变化，页面看起来也不一样

作为进一步检查，我还从样式表中删除了所有

@font-face

并引用了

font-family:“webfont-name”

规则，同样的行为还在继续。因此，我们可以排除网络字体的问题

您可以通过使用IE8访问以下内容并刷新/单击导航几次来查看异常情况。IE8何时放弃这些风格似乎完全是随机的。但是，在本机构建的控件页面中，每次都会正确加载所有样式

实时页面（有问题）

基于PHP的CMS在页面加载时打印出XHTML（模板内容与用户内容混合）

Prototype.js

默认情况下在页面加载时加载和初始化

CMS专有

scripts.js

文件在页面加载时解析

我的脚本在加载DOM时运行，基本上用我想要的HTML替换

body.innerHTML

CMS fluff HTML，然后向

添加样式表

对于

lte IE 8

，CSS扩展插件（selectivizr.js、html5.js和IE media querys.js）通过条件注释加载到

中。不确定他们是否等待

DOM:loaded

CMS WYSIWYG编辑器将所有回车转换为空的

标记，导致

等元素包含在损坏的

标记中，并在需要空白的位置创建额外的
标记。然而，只有
lt IE 8
似乎对此感到窒息，因此我添加了以下CSS规则来解决此问题：

:not(.ie7) p { display: none; }
.ie7 p { display: inline; }
article p { display: block !important; }

我应该注意，这里的外部样式表是从同一个域中提取的，但是每次重新上传它们时，都会为该文件生成一个新的基于MD5的URL。我不确定以前对文件（或以前的文件）的修订是否仍然可以通过以前的URL使用。但这不太可能是问题所在，因为新创建的

all.css

样式表仍然在删除从一开始就存在于文件中的规则

控制页面（工作完美无瑕）

纯XHTML文档-没有PHP

IE8及以下版本使用jQuery，而不是Prototype

页面加载时，所有资源（样式表）都显示在

中-无动态插入

对于lte IE 8，CSS扩展插件（selectivizr.js、html5.js和IE media querys.js）以本机方式初始化

重新措辞的问题： 你认为这些差异中的哪一个可能会导致IE 7/8在加载到Live页面时在样式上发生翻转？我个人怀疑要么是竞争条件问题，要么是

Prototype.js

和其他CMS脚本把事情搞砸了（不幸的是，没有办法从页面中清除这些内容）

PS：我已经尝试过使用IE的

createStylsheet（）

函数，但没有效果

更新-在IE8中工作/不工作的屏幕截图

IE8:正确加载时的DOM代码：

IE8:DOM代码在未正确加载时：

---

首先让我说，我参与了多个项目，团队已经开始通过Javascript动态生成DOM，包括通过CORS远程加载脚本

在3个不同项目（以及每个项目中使用的不同方法）上进行了数月的努力之后，我们最终不得不面对这样一个事实：IE7和IE8无法正确或一致地动态加载和处理外部脚本或CSS

我的建议是整合/组合PHP/服务器端的任何脚本，并作为一个文件提供，该文件可以在客户端缓存。

作为补充说明，这不完全是罪魁祸首。以正确的顺序下载、处理和呈现脚本/css涉及到巨大的复杂性，并对该过程进行编程，使其在任何环境下都能正常工作（webkit+mozilla+IE9+）需要接近专家级的知识和非常彻底的测试

在您的例子中，一个糟糕的“流”的例子是，当我特别查看您的页面时，它会在屏幕“更新”和CSS被拉入并应用之前短暂地显示未应用CSS的页面（讨厌！）。糟糕

我注意到的其他问题是大量的httprequest。每种方法都需要DNS查找、缓存/过期检查（以及由标题指定的其他内容），以及随后的响应下载。在台式机上，这并不是很明显，但在移动设备、平板电脑甚至一些速度较慢/陷入困境的PC上，这一点尤其明显

如果您正在当今的浏览环境中构建一个web应用程序，并且只有一个小团队，那么最好：