ie7下ajax加载内容样式无法生效的解决办法

阅读更多

今天在开发过程遇到了一个在ie7下非常诡异的问题:当使用ajax动态加载html内容时,如果内容中包括有引入的样式,那么这些样式不会马上被应用,需要等到鼠标移动一些距离才会被应用上。

 

oh!需要鼠标动一下才会应用上!!!

 

有问题的代码如下:

 

index.html

 

 





Insert title here






     

 

 

markup.jsp

 

 

<%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>

Hello

hello

 

 

 

 

@CHARSET "UTF-8";

#content {
    width: 200px;
    height: 200px;
    border: 1px solid green;
    margin: 0 auto;
}

img {
    border: 0;
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
}
 

 

这三段代码的逻辑很简单:在index.html中使用jquery ui的dialog组件加载markup.jsp中的内容。markup.jsp中使用的样式通过link标签引入。

 

 

问题的解决过程如下:

 

1. 检查doctype是否正确设置。如果DOCTYPE没有正确设置,那么ie有可能工作杂怪异模式下,导致很多奇怪的问题。我曾经犯过的错误就是把DOCTYPE的声明放在一个注释下面,而不是放在第一行,导致ie工作在怪异模式下,出现一堆不可思议的事。

 

 

2. 测试了火狐,chrome和ie9,发现这个问题只出现在ie7和ie8下

 

3. 测试将引入的样式改为内联样式,即把样式写在dom里面,发现没有问题

 

4. google一下,发现大部分人都说把link标签的定义放在父级元素里或者放到标签中定义就可以了。可是我开发的是一个Portlet,内容都是动态加载的,无法在页面最初渲染阶段把link引入进来。

 

5. 我继续尝试,发现当动态加载的内容比较简单时,不会出现问题;只当内容中有

时会出现样式无法应用上(需要鼠标动一下)的问题。

 

6. 继续google,尝试了很多hack的办法,最后在某个论坛里有人提及一句话:把一个dom元素的display状态切换一下,可以让ie重新渲染和加载css。试了一下,果然有效。

 

最终的解决办法是:

 

 

 

 

jquery的hide和show方法实际上操作的是display属性。

 

 

 

总结:

 

我觉得这应该是ie7和ie8的一个bug。因为根据我的试验和观察,只有在动态加载的内容中包含

元素时才会发生样式应用不上的问题。至于要动一下鼠标的问题,我的观察结果是当鼠标进入或者退出一个父级block元素时,样式会被应用上。

 

令人崩溃的ie啊,不过总算解决了!

 

你可能感兴趣的:(ie,hack,ajax动态加载样式)