今天在开发过程遇到了一个在ie7下非常诡异的问题：当使用ajax动态加载html内容时，如果内容中包括有<link>引入的样式，那么这些样式不会马上被应用，需要等到鼠标移动一些距离才会被应用上。
oh！需要鼠标动一下才会应用上！！！
有问题的代码如下：
index.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
<%@ 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>
@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工作在怪异模式下，出现一堆不可思议的事。
<!-- 这个注释不能写在第一行，否则会使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。试了一下，果然有效。
最终的解决办法是：
<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啊，不过总算解决了！
分享到：
相关推荐
这意味着可以在不重新加载整个网页的情况下，对网页的部分内容进行更新。 **发展历程**： - **初期探索**：1999年开始，随着浏览器功能的增强，开发者们开始尝试使用JavaScript来改善用户体验。 - **标准化进程**：...
AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。它主要涉及以下核心组件： 1. XMLHttpRequest对象：用来在后台与...
- **IE6/IE7**：在IE6和IE7中，如果`<a>`标签的`href`属性设置为`javascript:void(0)`，并且通过`onclick`事件调用函数，可能会导致页面重新加载或阻止默认行为（如跳转）失效。特别是在涉及AJAX请求时，这可能导致...
因此，在编写代码时，最好进行条件判断，只在IE6环境下加载pngFix1.2插件，以提高其他浏览器的性能。 为了确保最佳的兼容性和性能，开发者应当考虑以下几点： 1. 在使用pngFix1.2之前，检查用户的浏览器是否为IE6，...
然而，当CSS文件被异步加载时，浏览器并不会立即应用这些样式，因此可能会导致在某些情况下（如IE8）对话框没有正确的样式。为了解决这个问题，我们可以使用Ajax技术来动态加载CSS文件，并在加载成功后执行需要的...
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它允许Web应用程序从服务器请求并使用异步XMLHttpRequest（XHR）对象更新页面的某些部分。 **创建步骤：*...
解决方法通常包括使用JavaScript库如Modernizr来检测浏览器特性，或者通过JavaScript动态创建元素并设置内联样式，例如： ```javascript document.createElement('header'); ``` 底层实现是通过DOM API创建元素...
2. **广告内容的加载**：可以将广告内容（如图片或HTML）写入到创建的元素内，或者通过AJAX异步加载。 3. **事件监听**：监听窗口的`resize`事件，以在窗口尺寸变化时调整广告位置；监听滚动事件，确保广告在页面...
##### 1.1 IE6, IE7浏览器对JS的调试方式 - **准备工作** - **下载install-companionjs-v0.5.3** - 需要下载`install-companionjs-v0.5.3.rar`，并按默认路径安装。 - **安装** - 双击`install-companionjs-v...
- 如果在动态生成的元素上使用QQFace，需要使用`on()`方法来绑定事件，因为`click()`等直接事件绑定在动态元素上可能无法生效。 QQFace插件的使用，不仅可以提升用户体验，还能为开发者节省大量编写表情管理代码的...
- CSS也需要考虑各种浏览器的差异，使用前缀和特性检测来确保样式生效。 **总结** "jQuery蓝色下拉搜索框"是一个实用的前端组件，结合了jQuery的强大功能和蓝色主题的优美设计。通过理解其基本原理和实现过程，...
- **脚本和样式加载策略**：合理安排脚本和样式的加载顺序以优化页面性能。 - **请求错误和会话过期处理**： - **请求错误处理**：自动捕获并处理可能发生的请求错误。 - **会话过期处理**：当会话超时时采取适当...
2. **动态内容**：如果页面上的内容是动态加载的，可能需要使用`jQuery`的`on()`方法来绑定事件，确保排版效果在内容加载后也能生效。 3. **性能优化**：如果文档很大，大量使用`jQuery`操作可能会有性能问题，可以...
多个数据进行对比这是非常常见的需求，Highstock 可以让你为每个类型的数据添加坐标轴，每个轴可以定义放置的位置，所有的设置都可以独立生效，包括旋转、样式设计和定位，当然也支持多个数据共用一个坐标轴。...
多个数据进行对比这是非常常见的需求，Highcharts 可以让你为每个类型的数据添加坐标轴，每个轴可以定义放置的位置，所有的设置都可以独立生效，包括旋转、样式设计和定位，当然也支持多个数据共用一个坐标轴。...
修正部分IE6浏览器下顶部导航错位问题 修正加密日志可以在首页预览的问题 增加首页文章标题及右边栏链接滑动效果 新增访客VIP等级及认证功能 添加CSS3读者墙 新增个性表情 一些细节优化 TearSnow Fan 1.5...
多个数据进行对比这是非常常见的需求，Highstock 可以让你为每个类型的数据添加坐标轴，每个轴可以定义放置的位置，所有的设置都可以独立生效，包括旋转、样式设计和定位，当然也支持多个数据共用一个坐标轴。...
- 在重新加载后生效。 ##### 6. `autoencode` (autoencode) **描述:** 如果设置为`true`，则在编辑模式下输入的数据会自动进行HTML编码处理，以防止XSS攻击。 **属性详情:** - **类型**: Boolean - **默认值**...