Internet Explorer 8中，浮左移将背景色

我有一个问题，如何解决，在IE8设置浮动时留在CSS背景色被删除：Internet Explorer 8中，浮左移将背景色

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

此背景色：lightblue;被删除：

   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>

谢谢

来源

2013-03-31 user2228586

您可以使用如下所述的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-31 15:36:00

它doen't工作。 – user2228586

通常情况下，这种行为被失踪“布局”标志引起的 - 见http://www.satzansatz.de/cssd/onhavinglayout.html

您需要添加#nav UL {变焦：1.0; }来解决这个问题。

来源

2013-03-31 15:40:55 Richard

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

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

来源

2013-03-31 16:26:23 vidhyakrishnan

如何打开子菜单左侧，如果父母<li>是靠近屏幕的右侧（与该菜单右侧的后面）？此外钳住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>

谢谢

来源

2013-04-01 06:48:26 user2228586

Internet Explorer 8中，浮左移将背景色

回答

相关问题