3

我正在尝试使用任何东西在 IE6 中使用 Suckerfish 样式的下拉菜单:悬停但我一生都无法显示第 3 级!非常感谢它让我发疯任何帮助。

我的小提琴

继承人代码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;
}
4

4 回答 4

5

您似乎正在使用 HTML5,但没有使用 HTML5 shiv,这将允许旧浏览器识别 HTML5 标签。

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

您还将样式表加载到 HTML5 的“header”标签中,而不是在您似乎没有的文档的常规“head”标签中。

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

于 2012-07-18T11:27:17.243 回答
5

一种可能的解决方案:

display:inline-block在 IE6 中有一些严重的错误;我建议尝试一下display:inline

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

如果可行,请使用 IE6 CSS hack 进行制作,以便其他浏览器可以继续使用inline-block. 我建议要么使用下划线技巧,要么使用条件注释。

这是使用下划线hack的代码:

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

希望有帮助。

[注意:答案编辑为包含 hasLayout,扩展 IE6 css hack 选项,并提供一段代码]

于 2012-07-20T06:54:37.853 回答
0

在这一点上,Internet Explorer 6 已经死了,实际上它已经死了。99.9% 的 IE6 用户代理是机器人,我有3名访问者没有出现。我的浏览器市场份额基于 DOM 对象检测,因此与基于用户代理的统计数据不同,它实际上是可靠的。即使您可能被欺骗认为 IE6 实际上拥有 10% 的市场份额,您仍然必须处理它已经并将继续缩小的事实。我什至懒得真正测试 IE7,因为我只有一位数的访问者使用它。在这一点上,投入到 IE6/7 上的时间和金钱是没有任何理由的,除非客户已经死心塌地并且心不在焉,以至于他们会支付您每小时 50 美元来修复 IE6/7 特定的错误。

于 2012-07-25T15:49:16.210 回答
0

感谢大家的评论,最后我从头开始重写了菜单并让它在 IE6 中工作。我知道 IE6 已经死了,但我的客户最大的客户使用这个浏览器:(所以它必须完成。

于 2012-07-26T08:13:29.543 回答