网站上的顶部栏未在 Chrome 上正确浮动

Question

我正在创建一个网站，它应该是这样的： http://i.imgur.com/PjsnVPw.png ^^ 那是在 Internet Explorer 中

但在 Chrome 上看起来像这样：http://i.imgur.com/Ga6le1y.png

如您所见，chrome 上的顶部栏显示完全错误 用于此的 HTML 和 CSS 是

HTML

    <header>
        <img id="logo" src="images/logo.png" alt="Logo">
        <div id="topLinks">
            <div id="SoicalLinks">
                <a href="#"><img src="images/LinkedIn.png" alt="Linkedin logo"></a>
                <a href="#"><img src="images/twitterico.png" alt="Twitter Logo"></a>
            </div>
            <div id="PhoneNumber">
                01673 862133
            </div>
        </div>
        <nav>
            <ul>
                <li><a class="first" href="#">Coaching</a></li>
                <li><a href="#">NLP</a></li>
                <li><a href="#">Course</a></li>
                <li><a href="#">Culture Change</a></li>
                <li><a href="#">Training & Consultancy</a></li>
            </ul>
        </nav>
        <div class="clear"></div>
        <div id="banner">
            <div id="face">
                <img src="images/webface.png" alt="A side on view of a face">
            </div>
            <div id="fishwaterimage">
                <img src="images/fishwater.png" alt="a Fish with a splash of water">
            </div>
            <div id="quote">
                <p>"...The experience has been first class, I feel privileged to have had this opportunity. Thank you team Dexter."</p>
            </div>
            <div id="readmore">
                <p>Read more testimonials...</p>
            </div>
        </div>
    </header>

以及所有内容的 CSS

body {
    background-image: url(/images/background.png); background-repeat: repeat-x;
    margin: 0 auto 0 auto;
    width: 1024px;
}

img #logo{
    float: right;
    width: 325px;
    display: inline;
}

#topLinks{
    margin: 0 0 0 50px;
    width: 250px;
    display: inline;
    float: right;
}

#PhoneNumber{
    padding: 15px;
    color: #a7a2a5;
    background-color: #000;
    float: right;
}

#SoicalLinks{
    float: left;
}

nav{
    text-align: center;
    float: right;
    margin: -50px 0 0 0;
    width: 600px;  
}

nav ul
{
    list-style-type:none;
    margin:0;
    padding:0;
} 

nav a
{
    font-size: 20px;
    color: #383336;
    text-decoration: none;
    border-left: 1px solid #b22b8d;
    display:block;
    padding: 0px 10px 0 10px;
}

nav li
 {
    display: inline;
    float: left;
 }

nav ul a.first { 
   border-left: none; 
 } 

#banner{
    box-shadow: 1.5px 2.598px 15px 0px rgb( 0, 0, 0 );
    width: 900px;
    height:  248px;
    margin: 0 auto 0 auto;
}

#banner #face{
    float: left;
    z-index: 2;
    position: absolute;
}

#banner #fishwaterimage{
    float: right;
    margin: 0 0 0 0;
    z-index: 1;
}

#banner #quote{
    font-size: 26px;
    float: left;
    z-index: 3;
    margin: 25px 0 0 25px;
    color: #a7a2a5;
    width: 300px;
    position:absolute;
}

#banner #readmore{
    font-size: 15px;
    float: left;
    z-index: 3;
    margin: 170px 0 0 25px;
    color: #a7a2a5;
    width: 300px;
    position:absolute;
    font-style: italic;
}

任何知道为什么在 chrome 和修复程序中不能正确显示的人。

Answer 1

您是否尝试添加位置：绝对或位置：相对于导航栏？