IE6′s Bug系列之position定位

在ie6中，關於css定位樣式有一個bug，具體表現為（如下所示）：

ul{ width:150px;    margin:100px auto;    border:#000 1px solid;    padding-bottom:20px;}       li{ list-style:none;    padding:15px;    border-bottom:#000 1px solid;    position:relative;}    li a{ display:block;        width:30px;        height:30px;    background:#CC3333;    position:absolute;    top:0;    left:0;                 font-size:12px;    color:#fff;}li p{ font-size:14px;       line-height:24px;       border:#000 1px solid;}

html

<ul>  <li>      <a href="">定位</a>      <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>  </li>  <li>    <p>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</p>  </li></ul>

在常規主流瀏覽器中，顯示正常，a元素的定位原點為li的原點（padding值計算在內）。但是在ie6中，a元素的定位原點並不是li的原點，而是離li左15px、上0px的那個點，即沒有把padding值計算在內。

現整理解決方案如下：

（1）為relative樣式的父元素即li，添加樣式{zoom:1;}，使用該方法時要注意，當relative父元素內只有absolute這一個子項目時，父元素的padding-bottom值會消失。

（2）為absolute樣式的子項目即a使用相容ie6的hack樣式（如下所示）,該方法不推薦！！

li a{ display:block;        width:30px;        height:30px;        background:#CC3333;    position:absolute;    top:0;    left:0;        _left:-15px;        _top:0;          font-size:12px;    color:#fff;}