2012-07-25 56 views
0

我有一个关于CSS浮动和位置在IE6中的问题,我实现第二级孩子的树视图不会显示到左侧鼠标悬停时,这不会发生在IE7-9和其他浏览器(Mozilla FireFox & Chrome),但IE6。CSS浮动和位置不工作在IE6

请找到下面我的样本树视图代码片段:

<style type="text/css"> 
    .treeView 
    { 
     font-family: Century Gothic; 
     font-size: 13px; 
     font-weight: bold; 
     color: #ff6500; 
    } 

    /* hyperlink style */ 
    .treeView a 
    { 
     color: #ff6500; 
     text-decoration: none; 
    } 

    /* hyperlink hover style */ 
    .treeView a:hover 
    { 
     color: #ff6500; 
     text-decoration: underline; 
    } 

    .treeView ul 
    { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     width: 246px; 
    } 

    .treeView ul li 
    { 
     height: 100%; 
     background: #def0f6; 
     position: relative; 
     float: left; 
     width: 100%; 
     z-index: 3; 
    } 

    /* item background color */ 
    .treeView li 
    { 
     background: #def0f6; 
     border-top: 1px solid #007dc6; 
     border-left: 1px solid #007dc6; 
     border-right: 1px solid #007dc6; 
    } 

    .treeView ul li a, .treeView ul li span 
    { 
     display: block; 
     padding: 5px 8px 5px 15px; 
    } 

    /* hide and align child item, and child width */ 
    .treeView ul ul 
    { 
     position: absolute; 
     top: -1px; 
     visibility: hidden; 
    } 

    /* item background color when hover */ 
    .treeView li:hover 
    { 
     background: #ffffd8; 
    } 

    /* display child item when hover parent item */ 
    .treeView li:hover > ul 
    { 
     visibility: visible; 
    } 

    /* align 2nd child item to left when hover parent item */ 
    .treeView li:hover ul 
    { 
     display: block; 
     left: 246px; 
    } 
</style> 

<div class='treeView'> 
    <ul> 
     <li><span class='submenu'>Level 1</span> 
      <ul> 
       <li><a href='#' class='submenu'>Level 2</a> 
        <ul> 
         <li><a href='#'>Level 3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

我怀疑这是由于CSS的float:左和位置:相对。 任何想法如何float:在IE 6中工作?请帮忙

谢谢高级。

+2

接近2013年,您仍在使用IE6。这是一个悲伤的日子。 – Marwelln 2012-07-25 09:51:20

+0

上帝忘记IE6现在..这是刺激... – 2012-07-25 09:53:33

+0

这是一个互联网面临的网站,解决方案必须支持IE和跨浏览器的多个版本 – sams5817 2012-07-25 09:58:12

回答

2

子选择器>在IE6中不起作用。你可以通过重写你的CSS来更改它,或者使用类来确定你所处的级别。 可能还有其他问题;您应该使用display: none;而不是visibility: hiddenvisibility变化真的只有可见性,但布局等受到影响。 display: none把元素拿出来,是你真正想要的。