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

【问题标题】：Internet Explorer 8, float left removes background colorInternet Explorer 8，向左浮动删除背景颜色
【发布时间】：2013-03-21 18:59:20
【问题描述】：

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

谢谢

【问题讨论】：

标签： css internet-explorer-8 background-color

【解决方案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。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果父 <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>

谢谢

【讨论】：