Question

我有一个问题如何在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>

drowdown菜单有一个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>

谢谢

Answer 1

您可以使用此处所述的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。

Answer 2

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

你需要添加#nav ul {zoom：1.0;解决问题。

Answer 3

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efefef', endColorstr='#000000');

Answer 4

如果父<li>靠近屏幕右侧（此菜单位于右侧后面），如何向左侧打开子菜单？还有vise verca，如果我使用HTML代码？：

<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>

谢谢

Internet Explorer 8，向左浮动会删除背景颜色

4 个答案: