0

CSSでfloat leftを設定すると、IE8で背景色が削除される問題を解決する方法について質問があります。

<!DOCTYPE html>
<html>
    <head>
        <title>My page</title>
        <style>
            #nav {
                margin: 100px auto;
                text-align: center;
            }
            #nav ul ul {
                display: none;
            }

            #nav ul li:hover > ul {
                display: block;
            }

            #nav ul {

この背景色: 水色; 削除されます:

                background-color: lightblue;
                background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
                background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
                background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
                box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
                margin-left: 0px;
                padding: 0 20px;
                border-radius: 10px;
                list-style: none;
                position: relative;
                /*display: inline-table;*/
            }

            #nav ul:after {
                content: "";
                clear: both; 
                display: block;
            }

            #nav ul li {

....フロートを左に設定する場合:

                float: left;
            }

            #nav ul li:hover {
                background-color: #4b545f;
                background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
            }
            #nav ul li:hover a {
                color: #fff;
            }

            #nav ul li a {
                display: block;
                padding: 5px;
                color: #757575;
                text-decoration: none;
            }


            #nav ul ul {
                background: #5f6975;
                border-radius: 0px;
                padding: 0;
                position: absolute; 
                top: 100%;
            }
            #nav ul ul li {
                float: none; 
                border-top: 1px solid #6b727c;
                border-bottom: 1px solid #575f6a;
                position: relative;
            }
            #nav ul ul li a {
                padding: 5px;
                color: #fff;
            }   
            #nav ul ul li a:hover {
                background-color: #4b545f;
                background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
            }

            #nav ul ul ul {
                position: absolute;
                left: 100%;
                top:0;
            }
        </style>
    </head>

ドローダウン メニューの HTML コードがあります。

    <body>
        <div id="nav">
            <ul>
                <li><a href="#">Inspiration</a></li>
                <li><a href="#">Tutorials</a>
                    <ul>
                        <li><a href="#">Web Design</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

ありがとうございました

4

4 に答える 4

0

ここで説明されているように、clearfix クラスを使用してこの問題を解決できます: http://nicolasgallagher.com/micro-clearfix-hack/

HTML を次のように変更します。

<div id="nav" class="cf"> ... </div>

これらのプロパティをcssファイルに追加します

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

または、div#nav 要素に幅を追加することによって

編集: 実際には、#nav の代わりに #nav ul 要素に上記の指示を使用する必要があります。

于 2013-03-31T15:36:00.737 に答える
0

の IE では、背景のグラデーションが設定されていません#nav ul。追加してみるbackground:#efefef;か、

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#000000');
于 2013-03-31T16:26:23.233 に答える
0

通常、この種の動作は「レイアウト」フラグの欠落が原因です。http://www.satzansatz.de/cssd/onhavinglayout.htmlを参照してください。

#nav ul { zoom: 1.0; を追加する必要があります。問題を修正します。

于 2013-03-31T15:40:55.590 に答える