每隔几次加载页面（缓存或未缓存），IE 7/8将在样式表中删除一些CSS规则。
样式表本身显示为元素出现在最终的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);
}
});
如建议所示，即使我将所有规则合并到一个样式表中（这是我不喜欢的），IE 7/8在某些规则上仍然会像描述的那样翻转，并且页面显示不同。
进一步检查时，我还从样式表中删除了所有的@font-face和引用的font-family: "webfont-name"规则，但是相同的行为仍然存在。因此，我们可以排除webfonts是问题的原因。
您可以通过使用IE8访问以下内容并多次刷新/单击导航来查看异常情况。 IE8似乎完全随机地丢弃这些样式。然而，在本地构建的控件页面中，所有样式每次都能正确加载。
Live Page (with problems)
https://www.eiseverywhere.com/ehome/index.php?eventid=31648&tabid=50283
- PHP-based CMS prints out XHTML on page load (template content mixed w/user content)
Prototype.jsis loaded and initialized by default on page load- CMS proprietary
scripts.jsfile is parsed on page load - My scripts run when DOM is loaded, essentially replacing
body.innerHTMLCMS fluff-HTML with just the HTML I want, then adds stylesheets to<head>. - For
lte IE 8, CSS extension plugins (selectivizr.js, html5.js, and ie-media-queries.js) are loaded within the<body>via conditional comments. Not sure if they wait forDOM:loaded... The CMS WYSIWYG editor converts all carriage-returns to empty
<p>tags, resulting in elements like<section>being contained inside broken<p>tags, and extra<p></p>tags being created where whitespace is expected. Onlylt IE 8seems to choke on this, however, so I added the following CSS rules to remedy this::not(.ie7) p { display: none; } .ie7 p { display: inline; } article p { display: block !important; }I should note that the external stylesheets here are being pulled from the same domain, but each time they are re-uploaded, a new MD5-based URL is generated for the file. I'm not sure if previous revisions to the file (or previous files) are still available by their previous URLs. This isn't likely to be the problem though, since the newly created
all.cssstylesheet is still dropping rules that have been in the file from the start.
控制页面（完美运行）
http://client.clevelanddesign.com/CD/IDG/CITE/home.html
- 纯XHTML文档 - 没有PHP。
- 为了IE8及以下版本，使用jQuery而不是Prototype。
- 所有资源（样式表）在页面加载时都存在于中 - 没有动态插入。
- 对于lte IE 8，CSS扩展插件（selectivizr.js、html5.js和ie-media-queries.js）会被本地初始化。
重新表述的问题：
您认为以下哪些差异可能导致在Live页面上加载IE 7/8时样式反复出现？我个人怀疑是竞争条件问题，或者是Prototype.js和其他CMS脚本搞砸了事情（不幸的是没有办法从页面中清除它们）。
PS：我已经尝试使用IE的createStylsheet()函数，但无济于事。
更新 - 在IE8中工作/不工作的屏幕截图
IE8：正确加载时的DOM代码：
type.css和flex.css合并成cite.css，看看是否有任何不同。它应该完全相同。 - Sparky@font-face {...}）和引用其中给定的font-family名称的规则在50%的时间内不存在，并且与上述问题中描述的IE 7/8的不一致加载模式相同。1：合并它们不应该对IE选择应用规则产生影响吗？2：为什么IE会时不时地删除@font-face规则？ - atwixtor@font-face规则时存在问题。但在确认这两个问题是否相关之前，我想测试当所有@font-face规则已被删除（供测试使用）时，多个样式表（按照原始配置）如何工作。如果我能够在IE中得到一致的页面加载（其中应用了所有非@font-face样式），那么我可以说这两个问题源自同一个@font-face差异（在这种情况下，我将更改此问答标题）。 - atwixtor