本帖最后由 jianchang512 于 2013-4-13 17:01 编辑
完整版阅读地址 http://www.wanglu123.com/several-hack-ie6-browser/
构建针对ie浏览器的特殊规则 hack
除了ie6 以及之前的ie浏览器，所有的浏览器都将 html 作为所有元素的祖先，也就是说 html 是最顶级的元素，是所有元素的祖先，而没有父元素，但 IE6 及之前版本的 IE 会将一个未命名的 * 作为 html 的父元素，因此可以利用这个特异性来锁住 ie6 浏览器，建立只针对ie6的css规则，而对其他浏览器隐藏，从而让ie6也表现的像标准浏览器一样。
比如，在页面中引入这两条规则，
body { background: #fff; }* html body { background:#ff0000;}
那么在除 ie6 之外的浏览器会应用第一条，而将页面设为白色的背景色，他们不识别第二条规则，因而直接忽略。而ie6会识别第二条规则，而这条规则又因为排在后面，优先级高于上面的一条，因此ie6会将页面设置为红色（#ff0000为红色代码）。
holly hack 简易清除浮动
在ie6中，如果一个元素包含一个浮动的子元素，那么这个元素本身的高度将变得不足以容纳下这个浮动子元素，也就是这个浮动子元素会超出父元素的高度，如图
<style type="text/css">.wai { border:1px solid #000;} .nei { float: left; border: 1px solid #000; height: 300px; } </style><div class="wai clearfix" > <div class="nei">浮动的子元素</div> <h2>在父元素之内没有浮动的h2</h2> </div>
 当ie非浮动的父元素包含一个浮动的子元素时，子元素的高度将超出父元素
如何实现正常呢，让父元素正确的包含浮动子元素，方法很简单，如下
.clearfix:after { content: "."; // 在浮动元素之后生成一个内容 . display: block; // 将生成的内容置为块元素 height: 0; // 将生成的内容高度设置为0，从而让其消失 clear: both; // 清除浮动 visibility: hidden; /*使生成的内容隐藏，从而只让这个生成的内容起到一个清除浮动而 本身却不显示的作用*/}
这样就实现了在除ie6之外的浏览器正确的包围浮动子元素了，但在ie6之下还不行，因此要针对ie6特别添加以下代码
* html .clearfix { height: 1%; } //ie6将不会显示这个1%的高度，但必须要有
一切ok了，剩下的就是把.clearfix这个class值加在包含浮动子元素的父元素上，
 给包含浮动子元素的父元素添加一个这个class值，就可实现在ie6下正确的包围浮动子元素
完整代码如下
<style type="text/css"> .wai { border:1px solid #000;} .nei { float: left; border: 1px solid #000; height: 300px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clearfix { height: 1%; } </style> <div class="wai clearfix" > <div class="nei">浮动的子元素</div> <h2>在父元素之内没有浮动的h2</h2> </div>
让IE6实现居中
在firefox、chrome、safari、opera等标准浏览器中实现居中很容易，只需要将需要居中的元素的左右外边距margin-left和margin-right设置为auto，就会居中，但ie6无法实现，因此需要针对ie6的这个bug特别处理。代码也很简单
<body> <div id="waiceng"> .... </div> </body>
id=”waiceng”是最外层包围所有元素的容器，想让id=”waiceng” 居中，如下几行代码即可
body { text-align: center; // 页面中所有的元素都居中了，不仅仅是 id="waiceng"} #waiceng { margin: 0 auto; // ie6之外的浏览器因为这条规则而实现了居中 text-align: left; /* 因为上面作用到body的居中对齐也继承到了#waiceng的所有子元素上，这条规则重新将#waiceng的子元素设置为左对齐，这样就实现了只有#waiceng居中，而其内的元素左对齐，因为所有其他的元素都是#waiceng的子元素，所以也就实现了想要的效果*/ }
IE6浮动双边距
在ie6中，当给一个浮动元素设置一个外边距时，怪异的ie6就会诡异的将其边距变成了双倍的，比如
div="float: left; margin-left:10px;"
在ie6中实际的左外边距就会变成20px，这个bug的消除更简单，只需给这个浮动的元素添加一条声明 display:inline;就可以让ie6正确处理外边距了，因为浮动元素都是作为block来处理的，所以其他浏览器会忽略这条声明
IE6三像素偏移
ie6还有另一个诡异的bug，为任何紧挨在浮动元素旁的行内元素都加了3个像素，就算这个行内元素被包含在块级元素里也是如此。
比如
<div class="float"> 浮动元素 </div> <div class="no-float">非浮动元素文本</div> .float{float:left;width:300px;height:200px;} .no-float{margin-left:300px;}
在IE6中仔细观察，会发现，no-float向右移过去了3px，解决它也很容易。 在你只针对IE6的样式表中添加如下代码
.float{margin-right:-3px;}定义一个负的右外边距，将紧挨着的元素拉过来 .no-float{height:1%;margin-left:297px;}让紧挨着的这个元素左外边距减少3个像素，并设置一个会被忽略的高度。
IE的框模型
如果你给一个元素比如div设定width:100pxpx;border-width:2px;padding:8px;margin:5px;那么依照web标准，这个元素实际所占据的宽度应该是 5px+2px+8px+100px+8px+2px+5px=130px;
也就是设定的宽度，只是元素内容的宽度，不包括元素的内外边距和边框。
但IE浏览器在非标准状态也即Quirks状态下，会将内外边距和边框计算在宽度内，也就是说上面例子，内容宽度=总宽度设定的100px-5px-2px-8x-8px-2px-5px=70px
这样不同的框模型对于精确的布局来说是个巨大威胁，但好在这个问题非常容易解决，而且很少会遇到了，只要你在文档的最开头包含完整的DOCTYPE信息即可
比如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 不要省略掉这个url。
IE6在相对容器中的绝对定位
如果父元素是 position:relative 定位的元素，同时对子元素进行 position:absolute 定位，特殊性在于这样一种条件，如果对 absolute 定位的元素进行 bottom:0 定位，而与此同时 relative 定位的父元素没有指定高度，那么子元素在 ie6 中将不会出现在它应该出现的位置，而是出现在边距边框处。 要解决也很简单，只需要在针对ie6的样式表中给父元素指定一个 height:1%的高度即可，ie6会忽略掉这个高度。
IE6的空格bug
这个应该都遇到过吧，在导航条里最常见，
<ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul>
对 a 元素 display：block。显然上面换行的 li 标记之间有空格，这空格让代码更易读，浏览器也会忽略这个空格，但在诡异的ie6中，则会坚持显示这个空格，结果导致了 ie6下 页面 上导航 li 之间多了一点空间，这是不应该的，解决方法很简单，还是使用几乎万能的 height:1%,将这个1%的高度指定给 a 元素，即可解决这个问题，当然你要在针对ie6的样式表中指定，免得影响其他浏览器。
IE条件注释
最好的方法是不要加任何hack，将所有针对ie6的css放在专门的样式表中，然后通过ie专有的条件注释来引入，而其他浏览器会直接忽略
<!--[if lte IE 6]> 中间放针对ie的注释 上面的lte也可以用下面替代 lt 小于 lte 小于等于 gt 大于 gte 大于等于 IE 6 IE 7 IE8 IE 9 <![endif]-->
| 
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主