0

我对 IE6 中的 CSS Float 和 Position 有问题，当鼠标悬停时，我实现的第 2 级子级树视图不向左显示，这在 IE7-9 和其他浏览器（Mozilla FireFox 和 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 造成的。知道 float:left 如何在 IE 6 中工作吗？请帮忙

提前谢谢你。

4

1 回答 1

2

The child selector > does not work in IE6. You can do it by rewriting your CSS so it applies more generally, or use classes to identify the level you are at. There might be an other problem; you should use display: none; instead of visibility: hidden. visibility changes really only the visibility, but layout etc. is affected. display: none takes the element out and is what you really want.

于 2012-07-25T09:57:06.650 回答