0

我有一个问题如何解决在 IE8 中在 CSS 中设置浮动左侧时删除背景颜色：

<!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 ul 元素使用上述指示而不是#nav。

于 2013-03-31T15:36:00.737 回答
0

通常，这种行为是由缺少“布局”标志引起的 - 请参阅http://www.satzansatz.de/cssd/onhavelayout.html

您需要添加 #nav ul { zoom: 1.0; } 来解决问题。

于 2013-03-31T15:40:55.590 回答
0

没有为 IE 中的 IE 设置背景渐变#nav ul。尝试添加background:#efefef;或

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

<li>如果父级靠近屏幕右侧（并且此菜单位于右侧的后面），如何在左侧打开子菜单？如果我使用 html 代码，也是虎钳 Verca？：

<div id="nav" class="cf">
    <ul>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">JS</a>
                            <ul>
                                <li><a href="#">jQuery</a>
                                    <ul>
                                        <li><a href="#">JQuery 1</a></li>
                                        <li><a href="#">JQuery 2</a></li>
                                        <li><a href="#">JQuery 3</a></li>
                                        <li><a href="#">JQuery 4</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

谢谢

于 2013-04-01T06:48:26.310 回答