Question

我正在试图让一个suckerfish风格的下拉菜单在IE6中使用以下任何东西：悬停但不能让我的生活得到第三级显示！我非常感谢你对此提出任何帮助。

继承代码 HTML：

<!DOCTYPE html>
<html>
   <body>
        <header>
            <link rel="stylesheet" type="text/css" href="styleIE.css" />
        </header>
        <form>
            <div id="container">
               <div id = "menu">
                    <ul id="nav">
                        <li><a class="rhlinkstart" href="#"><span>Home</span></a></li>
                        <li><a class="rhlink" href="#"><span>Blad<br> Securities</span></a></li>
                        <li><a class="rhlink" href="#"><span>Market<br> Update</span></a></li>
                        <li><a class="rhlink" href="#"><span>Membership</span></a></li>
                        <li><a class="rhlink" href="#"><span>asdasd Info</span></a>
                            <ul>
                                <li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.gif" alt="&#9658;">About the DOOB</a>
                                    <ul>
                                        <li><a class="linkchild" href="#">DOOB Explained</a></li>
                                        <li><a class="linkchild" href="#">DOOB Jurisdications</a></li>
                                    </ul>
                                </li>
                                <li><a class="linkchild" href="#">International Recogintion</a></li>
                                <li><a class="linkchild" href="#"><img class = "arrow" src="Images/arrow.gif" alt="&#9658;">Advantages of listing</a> 
                                     <ul>
                                        <li><a class="linkchild" href="#">Advantages of Listing</a></li>
                                        <li><a class="linkchild" href="#">Offers</a></li>
                                    </ul>
                                </li>
                                <li><a class="linkchild" href="#">Advantages Of Membership</a></li>
                                <li><a class="linkchild" href="#">Publications</a></li>
                                <li><a class="linkchild" href ="#">Links</a></li>
                            </ul>
                        </li>
                        <li><a class="rhlinkend" href="#"><span>Contact Us</span></a></li>
                       <li>&nbsp;</li>
                    </ul>
               </div>
            </div>
        </form>
     </body>
</html>

CSS：

body{
  line-height:1;
  background: #e3e3e3; 
  behavior: url("csshover3.htc");
}

/*------------------------------------*\
 Main
\*------------------------------------*/
div#container
{
    width:1024px; 
    margin:0 auto;
    position: relative;
    text-align: center;
    background-color: white;
    border: 1px solid #8b8b8b;
 }

.contentwrapper {
    width: 964px;
    margin: 0px auto;
    text-align: left;
    height: 100%;
}

.clearall {
 clear: both;
}


/*------------------------------------*\
   Home Page - Menu Styling
\*------------------------------------*/

#menu {
    margin: 0 auto;
    padding-left: 2%;
    height: 47px;
    position: relative;
    top: 0;
    border: 1px solid rgb(140,51,61);
    font-size: 75%;
    display: block;
}
#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     height:47px;
     background: none;
     background-color: transparent;
     width: 100%;
}

#nav ul {
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
}

#nav a.rhlinkstart:link, #nav a.rhlinkstart:active, #nav a.rhlinkstart:visited {
    position: relative;
    float:left;
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 148px;
    text-align: center;
    height: 47px;
    margin-right: -.07em;
    margin-left: 0.5em;
    line-height: 47px;
    text-decoration: none;
}

#nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
    position: relative;
    float:left;
    font-family: Georgia;
    color: rgb(131,0,26);
    width: 148px;
    text-align: center;
    height: 47px;
    margin-left: -47px;
    line-height: 47px;
    text-decoration: none;
    display: block;
}

#nav a.rhlinkend:link, #nav a.rhlinkend:active, #nav a.rhlinkend:visited {
    float:left;
    position: relative;
    color: rgb(131,0,26);
    width: 148px;
    height: 47px;
    line-height: 47px;
    margin-left: -3.780em;
    font-family: Georgia;
    text-decoration: none;
}

#nav li {
    float:left;
    position:relative;
    display: block;
}

li a.rhlink span {
    line-height: 1em;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

#nav li a.rhlink:hover, 
#nav li a.rhlinkstart:hover,
#nav li a.rhlinkend:hover
{
    background: red;
    color: white;
    text-decoration: none;
}

#nav a.linkchild:link,
#nav a.linkchild:active,
#nav a.linkchild:visited 
{
    display:block;
    padding:0px 10px;
    text-decoration:none;
    color: white;
    background: pink ;
}

#nav a.linkchild:hover {
   background: rgb(118,0,18);
   color: white;
}

#nav ul {
    position:absolute;
    top:47px;
    left:0;
    margin: 0;
    width:200px;
    display:none;
}

#nav li ul a {
    width:15em;
    float:left;
    display: inline-block;
    line-height: 2.5em;
    text-align: left;
    vertical-align: middle;
}

#nav li {
     display: inline-block !important;
     float: left;   
}

#nav li a {
    display: inline-block !important;   
    vertical-align: middle;
}

#nav ul ul {
    top:auto;
}

#nav li ul ul {
    left:200px;
    margin:0;
}

#nav ul ul li ul {
    left:200px;
    margin:0;
}

#nav ul ul {
   display:none;
}

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

/* 2 and 13 */
#nav ul ul, 
#nav li:hover ul ul { 
   display:none;
}

/* 12 and 23*/
#nav li:hover ul, #nav li:hover li:hover ul { 
   display:block;
}

Answer 1

您似乎正在使用HTML5但未使用HTML5 shiv，这将允许旧浏览器识别HTML5标记。

http://code.google.com/p/html5shiv/

您还要在HTML5“标题”标记内加载样式表，而不是在您似乎没有的文档的常规“head”标记内。

修复这些问题可能有助于解决您的问题。

Answer 2

一种可能的解决方案：

display:inline-block在IE6中有一些严重的错误;我建议改为display:inline。

除此之外，您还需要做一些事情来触发IE将元素置于“hasLayout”模式。你不能直接这样做，因为它是一个内部的IE标志，但是设置许多CSS属性中的任何一个都会触发它。最常用的是zoom:1，因为它没有太多其他影响，并被其他浏览器忽略。

如果可行的话，使用IE6 CSS hack来实现它，以便其他浏览器可以继续使用inline-block。我建议使用下划线黑客或条件评论。

这是代码，使用下划线黑客：

display:inline-block;
_display:inline;
zoom:1;

希望有所帮助。

[注意：回答编辑包含hasLayout，扩展IE6 css hack选项，并提供一大块代码]

Answer 3

此时Internet Explorer 6已经死了，事实上它已经死了。 99.9％的IE6用户代理是机器人，我有三个访问者没有出现。我的浏览器市场份额基于DOM对象检测，因此与基于用户代理的统计信息不同，它实际上是可靠的。即使你可以被欺骗，以为IE6实际上拥有10％的市场份额，你仍然必须处理它已经并将继续缩小的事实。我甚至懒得去测试IE7，因为我只有一位数的访问者使用它。此时投入到IE6 / 7中的时间和金额超出了任何理由，除非客户已经死定并且他们不在乎他们会花费每小时50美元来修复IE6 / 7特定的错误。< / p>

Answer 4

感谢评论人员，最后我从头开始重写了菜单并让它在IE6中运行。我知道IE6已经死了，但我的客户最大的客户端使用这个浏览器:(所以必须这样做。

：hover无法获得第三个菜单级别以在IE6中显示

4 个答案: