每次加载(缓存或未缓存)页面时,IE 7/8都会在样式表中删除一些CSS规则.我的动态样式表中的1或2个不会加载.它总是与IE倾向于忽略的1或2个样式表相同 – 即使开发人员工具栏将它们显示为添加到头部！
样式表本身显示为< link>最终DOM中的元素,但是它们的一些规则没有应用(尽管每次重新加载它们都没有任何问题).
在我的位置,我没有从< head>编写代码的奢侈. (CMS限制) – 我只能从身体动态插入,这可能是问题.
更新：这是我使用的代码(位于< body>内)以插入样式表：
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放弃这些样式时,似乎完全随机.但是,在本机构建的控制页面中,每次都会正确加载所有样式.
实时页面(有问题)
https://www.eiseverywhere.com/ehome/index.php?eventid=31648&tabid=50283
>基于PHP的CMS在页面加载时打印出XHTML(模板内容与用户内容混合)
>默认情况下,在页面加载时加载并初始化Prototype.js
> CMS专有的scripts.js文件在页面加载时进行解析
>我的脚本在加载DOM时运行,基本上只用我想要的HTML替换body.innerHTML CMS fluff-HTML,然后将样式表添加到< head>.
>对于lte IE 8,CSS扩展插件(selectivizr.js,html5.js和ie-media-queries.js)被加载到< body>中.通过条件评论.不确定他们是否在等待DOM：loading …
> CMS WYSIWYG编辑器将所有回车符转换为空< p>标签,导致像< section>这样的元素被包含在破坏的< p>内标签和额外的< p>< / p>正在创建需要空格的标签.但是,只有lt IE 8似乎会对此产生影响,所以我添加了以下CSS规则来解决这个问题：
:not(.ie7) p { display: none; }
.ie7 p { display: inline; }
article p { display: block !important; }
>我应该注意,这里的外部样式表是从同一个域中提取的,但每次重新上载时,都会为该文件生成一个新的基于MD5的URL.我不确定以前的文件(或以前的文件)的先前版本是否仍然可用于以前的URL.这不太可能是问题,因为新创建的all.css样式表仍然是从一开始就删除文件中的规则.
控制页面(完美无瑕)
http://client.clevelanddesign.com/CD/IDG/CITE/home.html
>纯XHTML文档 – 没有PHP.
>对于IE8及更低版本,使用jQuery而不是Prototype.
>所有资源(样式表)都出现在< head>中在页面加载 – 没有动态插入
>对于lte IE 8,html5.js和ie-media-queries.js)本地初始化.
重新提问：
您认为哪些差异可能会导致IE 7/8在Live页面上加载时触发样式？我个人怀疑是竞争条件问题,还是Prototype.js和其他CMS脚本搞砸了(遗憾的是没办法从页面清除那些).
PS：我已经尝试过使用IE的createStylsheet()函数,但无济于事.
更新 – 在IE8中工作/不工作的屏幕截图
IE8：正确加载时的DOM代码：
IE8：未正确加载时的DOM代码：
解决方法
每隔几页加载,selectivizr.js无法正确加载.
所有使用CSS3选择器的规则都需要在IE 7/8中应用该脚本.因此,当IE 7/8未正确加载selectivizr.js时,将忽略这些规则.这些规则当然包括webfont引用,以及错误的< p>显示属性.
为了提醒大家,在我的脚本替换< body>之前,这些帮助程序JS脚本正在正常加载(从< body>内)加载初始页面.内容(包括该脚本引用).因此,它有可能初始化两次(有人可以确认吗？)
问题是,在控制网站上,selectivizr.js总是在IE 7/8中正确加载. CSS3帮助程序js和媒体查询帮助js文件之间也没有已知的不兼容性(正确初始化时).
我从页面中删除了selectivizr.js,并在20次刷新后以完全相同的方式加载页面.很好地恢复了一致性,我在IE 7/8中丢失了我的CSS3规则.
显然这就是有问题的js插件的工作方式：
In accordance with the W3C specs,a web browser should discard style
rules it doesn’t understand. This presents a problem — we need access
to the CSS3 selectors in the style sheet but IE throws them away. To
avoid this issue each style sheet is downloaded using a
XMLHttpRequest. This allows the script to bypass the browsers internal
CSS parser and gain access to the raw CSS file.
资料来源：http://www.css3.info/css3-pseudo-selectors-emulation-in-internet-explorer/
我可以尝试任何你可能拥有的建议的CSS3选择器插件;也许一个会加载更可靠,或者开销更少,因此与滞后相关的问题的空间更小.任何替代品？
或者,也许我应该在DOM准备好后第二次(在我的脚本替换正文内容之后)添加到< head>或者< body>中的其他地方.这些选择都没有奏效 – 它们的结果相同甚至更差.
