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;}

 

 

 

 

posted @ 2012-10-07 22:15  游不停的鱼  阅读(171)  评论(0编辑  收藏  举报