html - Internet Explorer 中的 CSS 下拉菜单偏移，其他工件也是如此

Question

我只使用 css 为客户站点构建了一个下拉菜单，它在 chrome 中看起来很棒。当然，在允许客户端使用站点之前，我没有在 IE 中检查它，客户端当然使用 IE。无论如何，这是两个屏幕截图。第一个是 chrome，这是我想要的样子:

http://addproxy.net/sites/testing_space/chrome.jpghttp://addproxy.net/sites/testing_space/ie.jpg

这是我用于整个导航栏的 CSS，因为我觉得我的标准导航栏样式之一导致下拉菜单看起来很有趣:

/* home (navigation) */
#nav{
    background-image:url(images/nav_bg.png);
    position:relative;
    display:block;
    top:0;
    width:940px;
    height:42px;
    text-transform:uppercase;
    font-weight:400;
    font-size:12px;
    margin:-1px 0 0 0;
    border-bottom:1px solid #a61300;
    z-index:5;
}
#nav #language{
    font-size:10px;
    float:right;
}
#nav ul li{
    float:left;
    position:relative;
}
#nav ul li a{
    display:block;
}
/*fancy nav */
#nav ul li ul a{
    display:block;
    color:#fff;
}
#nav ul li ul {
     display:none;
     padding:10px 0;
     text-align:center;
     width:160px;
     background:#b83423;
     border:1px solid #a61300;
     margin:10px 0 0 -14px;
     z-index:10;
}
#nav ul li #esp {
    width:200px;
}
#nav ul li ul li{
    border:0;
}

#nav ul li:hover ul{
    list-style-type:none;
    display: block;
    position: absolute;
    z-index:10;
}
/*end fancy nav */
#nav a{
    text-decoration:none;
    color:#fff;
}
#nav p{
    position:relative;
    display:inline;
}
#nav a:active{
    text-decoration:none;
}
#nav a:hover{
    text-decoration:none;
}

#links{
    margin:0 0 0 10px;
}
#links li{
    display:inline;
    padding:12px 13px;
    list-style-type:none;
}
#links li{
    border-right:1px solid #a61300;
}
#links a:hover{
    color:#ddd;
}
#links a:last-child{
    border:0;
}

这是 HTML:

    <div id="nav">
    <ul id="links">
        <a href="http://conceptoservices.com/?page_id=10"><li>Home</li></a>
        <a href="http://conceptoservices.com/?page_id=13"><li>About Us</li></a>
        <a href="http://conceptoservices.com/?page_id=16"><li>Contact Us</li></a>
        <a href="#"><li>Services
            <ul>
                <a href="http://conceptoservices.com/?page_id=21"><li>Business Services</li></a>
                <a href="http://conceptoservices.com/?page_id=23"><li>Notary Services</li></a>
                <a href="http://conceptoservices.com/?page_id=25"><li>Other Services</li></a>
            </ul>
        </li></a>
        <a href="http://conceptoservices.com/?page_id=27"><li>ITIN</li></a>
        <a href="http://conceptoservices.com/?page_id=29">
        <li id="language">
            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/esp.png" />
        </li>
        </a>
    </ul>
</div>

这个社区永远不会让我失望。提前致谢!

Answer 1

好吧，我还没有看过 HTML，但我已经通过猜测编写了一些自己的代码。奇怪的是，我遇到的 IE 问题完全不同，但尽管如此，还是试试这个。它对每个版本的 IE 都有很大帮助:

#nav ul li ul li { display: block; float: none;}

如果还是不行，你可以尝试添加 clear: left 看看效果如何。

编辑:顺便说一句，这是我使用的 HTML:

<div id="nav" style="background: #666">
            <ul id="links">
                <li><a href="giff">Guff</a>
                    <ul>
                        <li><a href="abc">Guff 1</a></li>
                        <li><a href="def">Guff 2</a></li>
                    </ul>
                </li>
                        <li><a href="ghi">Guff</a>
                            <ul>
                                <li><a href="jkl">Guff 1</a></li>
                                <li><a href="mno">Guff 2</a></li>
                            </ul>
                        </li>
            </ul>
        </div>