Question

我设法将它集中在Firefox和Chrome中，但它在IE8中不起作用。另外一个滚动条出现在IE8的底部。这是网站hugoth

和继承人css：

ul {
font-family: Arial, Verdana;
font-size: 14px;
display:block;
padding: 0;
list-style: none;
width: 100%;
margin: 0px 0px 0px 40px;
padding: 0px 0px 0px 30px;
text-align: center
    }
    ul li {
        display: block;
        position: relative;
        float: left;
    }
    li ul { display: none; }
    ul li a {
        display: block;
        text-decoration: none;
        color: #ffffff;
        border-top: 1px solid #ffffff;
        padding: 5px 15px 5px 15px;
        background: #2C5463;
        margin-left: 1px;
        white-space: nowrap;
    }

    ul li a:hover { background: #617F8A; }
    li:hover ul { 
        display: block; 
        position: absolute;
    }
    li:hover li { 
        float: none;
        font-size: 11px;
    }
    li:hover a { background: #617F8A; }
    li:hover li a:hover { background: #95A9B1; }

提前致谢

Alex

Answer 1

我感觉很慷慨，所以我用更好的代码重新创建整个页面（没有更多的嵌套表格用于布局）。

Live Demo

哦，我把你的菜单集中在你身上。

如果您有任何疑问，请与我们联系。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hugoth</title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    border: 0
}
body {
    font: 12px Tahoma, sans-serif
}
#container {
    margin: 0 auto;
    width: 754px;
    border-left: 2px solid #333;
    border-right: 2px solid #333;
}
#header {
    background: url(http://hugoth.com/test2/images/top.jpg) no-repeat;
    height: 150px
}
#header h1 {
    display: none
}
#content {
    background: #666
}
#menu {
    height: 40px
}
#middle {
    clear: both;
    margin: 0 auto;
    width: 474px;
    padding: 15px;
    background: #fff;
    text-align: center;
    font-family: Tahoma, sans-serif;
    font-size: 11px
}
#middle p {
    margin: 21px 0
}
#middle .important {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: bold
}
#footer {
    padding: 11px 0;
    text-align: center;
    color: #fff;
    font-size: 11px
}
#footer a {
    color: #f90;
    text-decoration: none
}
#footer a:hover {
    text-decoration: underline
}





/* dropdown section */
#menu {
    font: 14px Arial, Verdana, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    margin-left: 73px;
}
#menu ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none
}
#menu li {
    display: block;
    position: relative;
    float: left
}
#menu li ul { 
    display: none
}
#menu li a {
    display: block;
    text-decoration: none;
    color: #fff;
    border-top: 1px solid #fff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-right: 1px;
    /*white-space: nowrap*/
}
#menu li a:hover { 
    background: #617f8a
}
#menu li:hover ul { 
    display: block; 
    position: absolute
}
#menu li:hover li { 
    float: none;
    font-size: 11px
}
#menu li:hover a {
    background: #617f8a
}
#menu li:hover li a:hover {
    background: #95a9b1
}

</style>
</head>

<body>

<div id="container">
    <div id="header"></div>
    <div id="content">

        <ul id="menu">
            <li><a href="#">Home</a></li>

            <li><a href="#">Our Firm</a>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Executive</a></li>
                    <li><a href="#">Board</a></li>
                </ul>
            </li>

            <li><a href="#">Client Services</a>
                <ul>
                    <li><a href="#">Internationalization</a></li>
                    <li><a href="#">Business Thriving Advisory Board</a></li>
                    <li><a href="#">Venture Engine: supporting start-ups and smaller companies</a></li>
                    <li><a href="#">Financial Services</a></li>
                </ul>
            </li>

            <li><a href="#">Industry Practices</a>
                <ul>
                    <li><a href="#">Clean Technology</a></li>
                    <li><a href="#">Med Technology</a></li>
                    <li><a href="#">Other</a></li>
                </ul>
            </li>

            <li><a href="./" class="dir">Useful Links</a></li>

            <li><a href="./" class="dir">Contact</a></li>
        </ul>


        <div id="middle">
            <p class="important">This site is under construction</p>
            <p class="important">H&uuml;goth AB<br />Scheelev&auml;gen 15<br />223 70 Lund, Sweden</p>
            <p>For questions or other matters please contact any of the below: </p>
            <p>Bo Un&eacute;us &bull; + 46 (0)70 - 6773656 &bull; bo.uneus@hugoth.com</p>
            <p>Lottie Norrs&eacute;n  &bull; + 46 (0)70 - 4248321 &bull; lottie.norrsen@hugoth.com</p>
            <p>org.nr.  556306-0986</p>
        </div>
        <div id="footer">
            www.hugoth.com &copy; 2011 &bull; Privacy Policy &bull; <a href="mailto:webmaster@hugoth.com">webmaster@hugoth.com</a>
        </div>
    </div>
</div>

</body>
</html>

Answer 2

不确定中心问题。您是否尝试过使用XHTML doctype而不是HTML docytype？

就滚动条而言，它看起来像横幅太宽。尝试修剪图像或加宽div

如何让这个下拉菜单在IE8中居中？

2 个答案: