# 关于ie6下a标签的haslayout问题.

- Link: https://yjyj.net/learn/1606.html
- Published: 2010-10-23T13:45:19+08:00
- Author: 小 虾

⚡ 生猛大蝦编辑部 · 30 秒核心看点

 * IE6 下 a 标签的 haslayout 问题，可用 display、height、float、position、width、
   writing-mode、zoom 等属性触发。
 * 文章同时处理了 IE6 fixed 定位失真，避免 absolute 元素被连带影响，实战排障很接地
   气。
 * 核心结论：老 IE 兼容别硬扛，先定位问题，再用最小改动触发布局特性解决。

已经有几个客户跟我反映,[**半像素创意设计**](http://www.halfpx.com/)的站点在ie下有
问题.

正好今天起了个大早,顺便把[**半像素创意设计**](http://www.halfpx.com/)以前的历史遗留
问题全部解决掉.

已经2010年底了,ie6依然是个无比淫荡又邪恶的软件.又被我天朝伟大的盗版系统事业以及牛
逼的网银系统给无限扩大化,后果就是伟大的前端工作者们悲哀的奋斗在每一个可以温香软玉
抱满怀的销魂夜晚,消耗着自己的如花的青春和宝贵的生命…每次想起ie6都让我情不自禁的想
大骂一通.

 

废话不扯多了,今天解决了2大历史遗留问题,一个是IE6下的fixed定位,开始使用的相对定位
办法是在让人恼火,页面中所有的position: absolute都tnnd被强奸了.导致页面一拖动就一
塌糊涂.苦苦搜寻下找到了一个很棒的解决办法,来自一个牛逼的小伙子:[http://www.planeart.cn/?p=877](http://www.planeart.cn/?p=877).
使用之后果然腰不酸腿不痛上下楼也有劲了.

第二个是haslayout的问题,以前从来没有碰到过,看来是俺水平太差,几年了都没接触到这么
高端的东东过.那么解决办法也很简单,ie6下设置:

* display: inline-block 
* height: (任何值除了auto) * float: (left 或 right) * position:
absolute * width: (任何值除了auto) * writing-mode: tb-rl * zoom: (除 normal 外任意
值)

解决方案和解惑来自于:[http://www.qianduan.net/comprehensive-haslayout.html](http://www.qianduan.net/comprehensive-haslayout.html)

最后,还是想要深情的吼一句:IE6你个纯傻逼!

❓ 延伸问答与排错指南（FAQ）

IE6 下 a 标签为什么会有 haslayout 问题？

在 IE6 里，某些元素会因为布局触发条件不同而出现 haslayout 异常，进而引发显示或定位
问题。处理思路是给元素加上能触发布局的属性，例如设置非 auto 的 width、height，或
使用 zoom 等方式，让它进入稳定布局状态。

IE6 下怎么快速让元素触发 haslayout？

可尝试给元素设置 display:inline-block、height 非 auto、float、position:absolute、
width 非 auto、writing-mode:tb-rl，或 zoom 为非 normal 值。实际使用时不必全加，选
一种最小改动且不破坏页面结构的方式即可。

IE6 的 fixed 定位问题怎么处理更稳？

文章里提到的思路是采用替代方案来模拟 fixed 效果，避免直接使用会导致页面拖动错乱。
实操上应优先检查定位层级和绝对定位元素是否被影响，再用兼容写法逐步替换。

📚 【[招数学习](https://yjyj.net/category/learn)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [UltraEdit打开文件乱码](https://yjyj.net/learn/1605.html)
 * [谈谈网页设计师的成长之路](https://yjyj.net/learn/1600.html)
 * [启用WordPress 缩略图](https://yjyj.net/learn/wordpress-learn/1618.html)
 * [禁用wordpress自动保存和修订版本的几种方法](https://yjyj.net/learn/wordpress-learn/1623.html)
 * 热门必读[CSS 盒模型边界重叠 (Margin Collapse) 原理与解决方案](https://yjyj.net/css/3536.html)
 * 热门必读[css布局实例](https://yjyj.net/learn/3901.html)