ie7,8下ajax加载内容样式无法生效的解决办法
2014-03-08 13:08
357 查看
转自：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>
jquery的hide和show方法实际上操作的是display属性。
总结：
我觉得这应该是ie7和ie8的一个bug。因为根据我的试验和观察，只有在动态加载的内容中包含<img>和<table>元素时才会发生样式应用不上的问题。至于要动一下鼠标的问题，我的观察结果是当鼠标进入或者退出一个父级block元素时，样式会被应用上。
令人崩溃的ie啊，不过总算解决了！
今天在开发过程遇到了一个在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>
jquery的hide和show方法实际上操作的是display属性。
总结：
我觉得这应该是ie7和ie8的一个bug。因为根据我的试验和观察，只有在动态加载的内容中包含<img>和<table>元素时才会发生样式应用不上的问题。至于要动一下鼠标的问题，我的观察结果是当鼠标进入或者退出一个父级block元素时，样式会被应用上。
令人崩溃的ie啊，不过总算解决了！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IE6,IE7下面td里面内容为空格时设置边框样式不对解决办法
- Glide加载网络图片，服务器内容更新但是Glide缓存无法清理的解决办法
- 在vs2010中，开发silverlight时无法感知和加载样式的解决办法。
- 电驴提示“该内容尚未提供权利证明，无法提供下载”之解决办法
- BSplayer无法加载字幕的简单解决办法
- Ajax生成的动态标签无法被另一个javascript函数处理的解决办法
- 错误: 找不到或无法加载主类 tet 解决办法
- 【转】该内容尚未提供权利证明，无法提供下载（解决办法）
- 解决ajax加载的页面js无法找到的问题
- .net无法加载oci.dll的解决办法
- 明明加载好了css，js文件，页面的样式还是不对的解决办法
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
- IIS无法加载字体文件(*.woff,*.svg)的解决办法
- Ajax中主页加载分页面后，分页面js脚本不执行的解决办法
- java运行显示“找不到或无法加载主类”的解决办法（linux）
- 电驴提示“该内容尚未提供权利证明，无法提供下载”之解决办法详解
- 在VMware中测试LDD并口程序时无法加载short模块的解决办法
- 访问国外技术网站时，长时间无法显示内容的解决办法
- Eclipse 下找不到或无法加载主类的解决办法
- SnagIt截图后无法在编辑器打开，不显示截图内容的解决办法