DIV+CSS教程_解决IE6晃动问题，是绝对定位的引起_div+css教程_H5之家

DIV+CSS教程_解决IE6晃动问题，是绝对定位的引起

我给 li 设了relative 。然后让一个鼠标经过的 li 时弹出一个div。我给那个div设了 absolute 。当我显示这个div时，li 的高度IE6就发生了变化，他会变高一点点，估计有两像素，就 li 的下面多出来的，不是很明显，但能开出来。特别是有了js后非常明显，就感觉晃的挺厉害的。这就是他晃的原因只要absolute的div显示出来，li 就变高，所以感觉就是div定位的问题，只有在 IE6 会变高，其他浏览器正常。请高手帮我看看是原因吧。

下面是源码

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="雅尚-女性购物时尚网">
<meta name="keywords" content="雅尚-女性购物时尚网">
<meta name="robots" content="all">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>雅尚网-女性购物时尚网</title>
<style type="text/css">
body,div,span,p,h1,h2,h3,h4,h5,h6,table,th,td,tr,lable,em,ul,li,dl,dt,dd{ font-family:"宋体"; font-size:12px; padding:0px; margin:0px; color:#454545;}
ul,li{ list-style:none;}
img{ border:0px; display:block;}
.clear{ clear:both;}
#content{ width:960px; margin:10px auto;}

.con_head{ width:960px; margin:0px auto 10px;}
.con_head_left{ width:210px; float:left; position:relative; z-index:2;}
.con_head_left1{ width:206px; background:url(../images/left_bg.gif); background-repeat:repeat-x; background-position:top; border:#a80717 solid 2px; padding:0px 0px 10px 0px; margin-bottom:12px; position:relative;}
.con_head_left1 h1{ font-size:14px; color:#970009; text-align:left; margin-left:0px; padding:8px 0px 0px 12px;}
.con_head_left1 ul{ padding-top:8px; border-bottom:dashed #d9d9d9 1px;}
*html .con_head_left1 ul{ padding-top:5px; border-bottom:dashed #d9d9d9 1px;}
*+html .con_head_left1 ul{ padding-top:5px; border-bottom:dashed #d9d9d9 1px;}
.con_head_left1 ul li{ background:url(../images/sanjiao.gif) no-repeat right; margin-right:10px; width:auto!important; width:195px; height:auto!important; height:12px; text-align:left; position:relative; z-index:5;}
.con_head_left1 ul li.a1{position:relative; z-index:10;}
.con_head_left1 ul li.a2{position:relative; z-index:-1;}
.con_head_left1 ul li a{ color:#454545; text-decoration:none; display:block; line-height:12px; height:12px; margin-left:7px; padding-left:5px;}
.con_head_left1 ul li a:hover{ background-color:#ae1d1f; text-decoration:none; display:block; color:#fff;}
.con_head_left1 ul li a:hover span{ text-decoration:none; color:#ae1d1f;}
.con_head_left1 h1 a{ color:#970009; text-decoration:none;}
.con_head_left1 h1 a:hover{ color:#e0370e; text-decoration:none;}
.con_head_right h1 a{ color:#FFF; text-decoration:none;}
.con_brand{ width:206px;}
.con_brand ul{ width:196px; padding:0px 5px; border:0px; margin:0px;}
.con_brand ul li{ width:98px!important; height:30px!important; float:left; padding:15px 0px; margin:0px; border-bottom:#d8d8d8 dashed 1px; text-align:center; background:none; position:none;}
.con_brand ul li img{ margin:3px auto 0px; border:#e8e8e8 solid 1px;}
.con_brand ul li a{ color:#454545; text-decoration:none; height:28px; padding:0px; margin:0px;}
.con_brand ul li a:hover{ color:#454545; text-decoration:none; background:none;}
.con_brand p{ text-align:right; line-height:24px; padding-right:5px; font-size:14px; margin-top:10px;}
.con_brand p a{ color:#454545; text-decoration:none;}
.con_brand p a:hover{ color:#ae1d1f; text-decoration:underline;}
.con_head_left0{ width:206px; height:30px; line-height:30px; background:url(../images/con_head_left0_bg.gif) no-repeat; text-align:center; margin-bottom:2px;}
.con_head_left01{ width:206px; height:30px; line-height:30px; background:url(../images/con_head_left0_bg.gif) no-repeat; text-align:center; border-bottom:#a80717 solid 2px;}
.con_left0_1{ height:30px; width:103px; float:left; color:#454545; line-height:30px; font-size:14px; font-weight:bold;}
.con_left0_2{ height:30px; width:103px; float:left; color:#fff; font-weight:normal; line-height:30px; font-size:14px; font-weight:bold;}
.position_div_1{
    position: absolute;
    background:url(../images/position_div_1.gif);
    background:#FFFF00;
    background-repeat:no-repeat;
    background-position:bottom;
    width:214px;
    left: 164px;
    top: -23px;
    z-index:9999999;
}
.position_div_2{
width:214px;
    background:url(../images/position_div_2.gif);
    background-repeat:no-repeat;
    background-position:top;
}
.position_div_4{
width:189px;
padding:20px 0px 0px 25px;
margin:0px;
}
.position_div_4 ul{ background:url(../images/sanjiao.gif); background-repeat:no-repeat; background-position:left center; border-style:none; padding:0px 0px 7px 0px; height:14px; text-align:center;}
*html .position_div_4 ul{ background:url(../images/sanjiao.gif); background-repeat:no-repeat; background-position:left center; border-style:none; padding:0px 0px 0px 0px; height:14px; text-align:center;}
*+html .position_div_4 ul{ background:url(../images/sanjiao.gif); background-repeat:no-repeat; background-position:left center; border-style:none; padding:0px 0px 7px 0px; height:14px; text-align:center;}
.position_div_4 ul li{ width:90px!important; float:left; text-align:left; margin:0px 0px; height:20px; line-height:16px; padding-top:6px; border-bottom:#ebebeb solid 1px; padding-bottom:3px; padding-right:0px; background:none;}
.position_div_3{
background:url(../images/position_div_3.gif);
    background-repeat:repeat-y;
width:189px;
    padding:5px 0px 10px 25px;
    margin:0px 0px 10px 0px;
}
.position_div_4 ul li a{ color:#454545; text-decoration:none; display:block; padding-left:10px; padding-right:0px;}
.position_div_4 ul li a:hover{ text-decoration:none; color:#fff; padding-left:0px; padding-left:10px; background-color:#ae1d1f;}
.position_div_3 ul li a{ color:#454545; text-decoration:none; display:block; padding-left:10px; padding-right:0px;}
.position_div_3 ul li a:hover{ text-decoration:none; color:#fff; padding-left:0px; padding-left:10px; background-color:#ae1d1f;}
.position_div_3 ul{ background:url(../images/sanjiao.gif); background-repeat:no-repeat; background-position:left center; border-style:none; padding:0px 0px 12px 0px; height:14px; text-align:center;}
*html .position_div_3 ul{ background:url(../images/sanjiao.gif); background-repeat:no-repeat; background-position:left center; border-style:none; padding:0px 0px 0px 0px; height:14px; text-align:center;}
*+html .position_div_3 ul{ background:url(../images/sanjiao.gif); background-repeat:no-repeat; background-position:left center; border-style:none; padding:0px 0px 12px 0px; height:14px; text-align:center;}
.position_div_3 ul li{ width:90px!important; float:left; text-align:left; margin:0px 0px; height:20px; line-height:14px; padding-top:7px; padding-bottom:3px; border-bottom:#ebebeb solid 1px; background:none;}
.con_head_right{ width:741px;}
</style>
</head>
<body>
<div id="content">

   <div class="con_head">
<div class="con_head_left">
               <div class="con_head_left1" id="category_menu">


                        <h1><a href="">化妆品</a></h1>
                        <ul>

         <li><a href="">美容护肤 <span class="zi_huise">卸妆 洁面  </span></a>
                        <div class="position_div_1" style="display: none;">
                <div class="position_div_2">
                  <div class="position_div_4">
                        <ul>
                            <li><a href="">卸妆</a></li>
                          <li><a href="">洁面</a></li>
                        </ul>
                        <div class="clear"></div>
                  </div>
                <div class="position_div_3">
                        <ul>
                            <li><a href="">爽肤</a></li>
                          <li><a href="">面霜/乳液</a></li>
                        </ul>
                        <div class="clear"></div>
                        <ul>
                            <li><a href="">晚霜</a></li>
                          <li><a href="">精华</a></li>
                        </ul>
                        <div class="clear"></div>
                        <ul>
                            <li><a href="">眼部</a></li>
                          <li><a href="">面膜</a></li>
                        </ul>
                        <div class="clear"></div>
                        <ul>
                            <li><a href="">护肤套装</a></li>
                          <li> </li>
                        </ul>
                        <div class="clear"></div>
                        </div>
                  </div>
               </div>
         </li>
         <li><a href="">靓丽彩妆  <span class="zi_huise"> 隔离  遮瑕 </span> </a>
               <div class="position_div_1">
                     <div class="position_div_2">
                        <div class="position_div_4">
                             <ul>

                        <li><a href="">隔离</a></li>
                        <li><a href="">遮瑕</a></li>
                        </ul>
                        <div class="clear"></div>
                  </div>
                     <div class="position_div_3">
                        <ul>
                            <li><a href="">粉底</a></li>
                          <li><a href="">粉饼</a></li>
                        </ul>
                        <div class="clear"></div>
                        <ul>
                            <li><a href="">其他</a></li>
                          <li> </li>
                        </ul>
                        <div class="clear"></div>
                     </div>
                  </div>
               </div>
         </li>
         <li><a href="">洗护用品 <span class="zi_huise">洗发护发 焗油发膜 </span></a>
            <div class="position_div_1" style="display: none;">
                  <div class="position_div_2">
                     <div class="position_div_4">
                        <ul>
                            <li><a href="">洗发护发</a></li>
                          <li><a href="">焗油发膜</a></li>
                        </ul>
                        <div class="clear"></div> </div>
                <div class="position_div_3">
                        <ul>
                            <li><a href="">头发造型</a></li>
                        <li><a href="">沐浴</a></li>
                        </ul>
                        <div class="clear"></div>
                  </div>
                </div>
            </div>
         </li>

                  </ul>
                  <div class="clear"></div>




                        <h1><a href="">母婴用品</a></h1>
                        <ul>

                        <li><a href="">妈妈专区  <span class="zi_huise">防辐射服 孕妇内衣内</span></a>
                        <div class="position_div_1" style="display: none;">
                              <div class="position_div_2">
                                 <div class="position_div_4">
                                   <ul>

                                 <li><a href="">防辐射服</a></li>
                                <li><a href="">孕妇内衣</a></li>
                             </ul>
                          <div class="clear"></div>
                     </div>
                        <div class="position_div_3">
                        <ul>
                            <li><a href="">个人护理</a></li>
                                <li> </li>
                                </ul>
                                <div class="clear"></div>
                        </div>
                     </div>
               </div>
               </li>
               <li><a href="">婴儿洗护 <span class="zi_huise"> 沐浴 洗发 </span></a>
                  <div class="position_div_1" style="display: none;">
                     <div class="position_div_2">
                        <div class="position_div_4">
                        <ul>
                            <li><a href="">沐浴</a></li>
                          <li><a href="">洗发</a></li>
                        </ul>
                        <div class="clear"></div>
                     </div>
                     <div class="position_div_3">
                      <ul>
                        <li><a href="">护肤</a></li>
                        <li><a href="">理发器</a></li>
                        </ul>
                        <div class="clear"></div>
                        <ul>
                            <li><a href="">套装</a></li>
                            <li> </li>
                        </ul>
                        <div class="clear"></div>
                     </div>
                  </div>
               </div>
            </li>
         </ul>
         <div class="clear"></div>

   </div>
</div>
<div class="clear"></div>
  </div>
</div>
</body>
</html>

定位还是少用的好