IE 8及以下版本拒绝从头文件中定义的CSS样式表中应用样式,当它们加载到document.ready jquery调用中时.
偏执型客户希望NOBODY能够看到代码或开发网站,所以我必须给出一个简短的例子.
客户希望网站仅在几乎完全“ajaxed”的网站上呈现HTML的相关部分.所以,这个网站就像一个网格.如果你加载首页,你得到这个：
<div id="content">
<section id="home">
<h1>Title</h1>
<p>Hi There!</p>
</section>
</div>
然后onload我使用jquery渲染周围的页面…
$(document).ready(function(){
$('#content').append('<section id="about"><h1>About Us</h1></section>');
});
IE可以处理这么多,但是当我尊重我精心设计的CSS时,它只会忽略我的风格和笑声.
该网站完全定位,绝对定位,吨索引和大量的jquery动画.你不想为某些劣质但主要使用的浏览器重新创建一些更愚蠢的方式.亲爱的上帝,请告诉我有人已经弄清楚某种方式让IE在加载后创建的元素上尊重定义的样式.
你有什么想法吗
>我知道大量的真正的代码是首选,但这是简洁的,告诉你足够的,没有一个完整的审计.即使唯一定义的样式是#about {display：none; }它被忽略.关于部分按照请求写入,但默认情况下是显示块.
>我也知道这不是技术上的,但我使用技术术语尝试澄清页面加载的顺序,尽管它不是标准加载的html.
解决方案
$('#content').append($('<section>').attr('id','about').html('<h1>About Us</h1><p>some text</p>'));
适用于这个和所有孩子的元素以及CSS.不知道为什么嵌套元素被IE正确读取,而不必以相同的方式声明,但我非常感激.谢谢jfriend00和所有帮助的人.
解决方法
$('#content').append('<section id="about"><h1>About Us</h1></section>');
如果您在IE DOM检查器中查看,则看不到所需的标签嵌套正确,因此DOM被弄乱,因此样式规则无法正常工作.问题是如何通过jQuery插入到DOM中.我认为这是一个jQuery交互问题与IE比任何其他.
没有在IE中详细介绍代码,我不能说是实际上是一个jQuery问题还是一个IE问题,或者只是其中一个已经出现的组合错误.显然,IE已经获得了以前的过错的第一责任,但是最好通过使用一些更直接的代码来避免这个错误.
打破代码,这段代码在IE7中为我工作：在这里,我们创建一个单一的标签,添加一些innerHTML,然后使用append()插入该根标签,而不是给HTML添加.
$(document).ready(function() {
var section = $("<section>");
section.attr("id","about");
section.html('<h1>About Us</h1>');
$('#content').append(section);
});
您可以在这里查看修改后的代码：http://jsfiddle.net/jfriend00/vEST8/
我不知道为什么IE有直接通过jQuery附加一个整个HTML字符串的问题,但我以前看过这个问题.
