0

IE6 の CSS Float と Position に関する問題があります。私が実装したツリー ビューは、マウス ホバー時に左に表示されません。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

子セレクター>は IE6 では機能しません。より一般的に適用されるように CSS を書き直すか、クラスを使用して現在のレベルを識別します。別の問題がある可能性があります。display: none;の代わりに使用する必要がありvisibility: hiddenます。visibility実際には可視性のみが変更されますが、レイアウトなどが影響を受けます。display: none要素を取り出して、本当に欲しいものです。

于 2012-07-25T09:57:06.650 に答える