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

最新推荐文章于 2021-08-05 15:38:42 发布

WitsMakeMen

最新推荐文章于 2021-08-05 15:38:42 发布

阅读量4.3k

点赞数

分类专栏：网页开发html+css+JavaScript（Jsp）

网页开发html+css+JavaScript（Jsp）专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一个在IE7/8下使用AJAX动态加载HTML内容时遇到的样式应用延迟问题。当加载的内容包含<link>引入的样式时，需要鼠标移动才能正确显示样式。文章提供了具体的解决方案，通过jQuery的hide和show方法触发样式重新加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://zsuczw.iteye.com/blog/1387802

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

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

有问题的代码如下：

index.html

   Html代码  
   
  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>Insert title here</title>  
 <link href="/js/jquery-ui/themes/smoothness/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css"/>  
 <script type="text/javascript" src="/js/jquery-ui/jquery-1.6.2-min.js" ></script>  
 <script type="text/javascript" src="/js/jquery-ui/ui/jquery-ui-1.8.13.custom.js"></script>  
 <script type="text/javascript">  
 $(function(){  
     $('#bt').click(function(){  
         $('#main').dialog({  
             open: function(){  
                 var self = $(this);  
                 $.get('markup.jsp', function(markup){  
                     self.html(markup);  
                 });  
             }  
         });  
     });  
 });  
 </script>  
 </head>  
 <body style="height:500px;border:1px solid green;">  
      <p style="border:1px solid black;"><button id="bt">加载</button></p>  
     
     <div id="main"></div>  
 </body>  
 </html>  

markup.jsp

   Jsp代码  
   
  
 <%@ page language="java" contentType="text/plain; charset=UTF-8" pageEncoding="UTF-8"%>  
 <link href="/index.css" rel="stylesheet" type="text/css" />  
 <div id="content">  
 <p>Hello</p>  
 <p><img alt="hello" src="/weather/css/images/noChart.jpg"></p>  
 </div>  

   Css代码  
   
  
 @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工作在怪异模式下，出现一堆不可思议的事。

   Html代码  
   
 <!-- 这个注释不能写在第一行，否则会使ie工作在怪异模式下。任何时候都应该把DOCTYPE的声明写在第一行。--> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

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

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

5. 我继续尝试，发现当动态加载的内容比较简单时，不会出现问题；只当内容中有<table>和<img>时会出现样式无法应用上（需要鼠标动一下）的问题。

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

最终的解决办法是：

   Js代码  
   
  
 <script type="text/javascript">  
 $(function(){  
     $('#bt').click(function(){  
         $('#main').dialog({  
             open: function(){  
                 var self = $(this);  
                 $.get('markup.jsp', function(markup){  
                     self.hide().html(markup).show(); //这里操作的实际上是display属性  
                 });  
             }  
         });  
     });  
 });  
 </script>  