Question

我有一个关于IE6中CSS Float和Position的问题，我实现了第二级子视图的树视图在鼠标悬停时不显示左边，这在IE7-9和其他浏览器中不会发生（Mozilla FireFox＆amp; Chrome）但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：left和Position：Relative。任何想法浮动：如何在IE 6中工作？请帮忙

先谢谢你。

Answer 1

子选择器>在IE6中不起作用。您可以通过重写CSS来实现它，使其更普遍适用，或使用类来识别您所处的级别。可能还有另一个问题;您应该使用display: none;代替visibility: hidden。 visibility实际上仅更改了可见性，但布局等受到影响。 display: none将元素取出并且是您真正想要的。

CSS Float和Position在IE6中不起作用

1 个答案: