昨天在抒写一个专题的页面时，在ie6下碰到了一个奇怪的问题，不过解决了现在分享一下。
专题页面地址：http://travel.ly333.com/topic/show/38
可以看到这个页面的结构很简单，四栏的瀑布式布局。中间用了一个<ul>包裹着四个<li>，每个<li>里面由一个<a>包裹，<a>标签里面分<img>和<div>。
1、首先<a>、<span.btn>标签以块状显示，<span.btn>相对于<a>定位。
2、4个<li>均向左浮动，<ul>使用clearfix类来清除浮动。
3、在高级浏览器中这样的显示是再正常不过了，但是在ie6下面就出现了意外。<span.btn>按钮被“挤”到下面去了，而且还被图片覆盖着。
4、ie7下却没有这样的问题，我的第一个反应是不是hasLayout没有激发？<a>标签的块状显示没有作用到？于是在<a>中加上了“zoom: 1;”一刷新，问题解决！
5、果然是hasLayout在作怪，不过新的问题又出现了~~~整一块<ul>“跑”到<h2>上面了，只有当鼠标移过的时候才能正确的回到位置。
6、<ul>和<h2>是兄弟，他们的父亲都是<div.content>。<ul>盖住<h2>的位置刚好是<div.content>的顶部边缘，说明<ul>浮动起来了，像文本流一样没有解析到<h2>是块级元素，整个浮动最顶端。那位什么鼠标移过的时候就能回归到原位呢？难道又是hasLayout的缘故？我尝试着在<div.content>上加上“zoom: 1;”，刷新页面，还是原样。。。
7、在最初的时候<span.btn>不是靠定位来布局的，而是使浮动到右边，那时候<a>标签还没有“position: relative;”样式，在ie6下页面都能显示正常，只是<span.btn>占据了一行，所以将它改成定位方法来实现。那么，会不会是因为<a>标签有了“position: relative;”样式导致的呢？我尝试对它的父亲<div.content>再添加一个“position: relative;”样式，刷新页面，问题解决！O(∩_∩)O哈哈~
8、回想一下，这样做的话其实就是使<div.content>有了布局的概念。从这里可以看出<div>在ie6引擎下的布局属性会受到子标签的影响，出现流动的现象时首先应该反应过来是布局属性的问题，问题便很快解决。针对hasLayout引起的问题和激发方法也在这里顺带做一下总结。
ie6下浮动产生的双边距问题：对浮动的元素用“display: inline;”来解决。
ie6下的3像素偏移和躲猫猫问题：对偏移的元素用“_height: 1%;”来解决。
激发hasLayout方法：zoom: 1; （除normal外的任意值）
height: 1%; （除auto外的任意值）
display: inline-block;
width: 1%; （除auto外的任意值）
float: left; （float: right;）
position: absolute; （position: relative;）