html - 跨浏览器显示问题

Question

在进一步调查中，我发现我的 CSS 中有些东西让我的导航显示变得有趣 -> 我的 innerPage 和下面的 HTML(主页)上的所有内容都可以正常加载，但我仍然被导航逼疯了所以我已上传我的完整 html 和 css 来解决这个问题，

HTML:

<div id="container"> 

<header> 
                <h1>company</h1> 
                <div id="logo"><a href="http://company.co.nz/">Home</a></div> 

<section id="sales"> 
        <p></p> 

</section> 

<section id="searchBox"> 

    <form id="searchBoxForm"> 
        <fieldset> 
                <input type="text" name="search" id="search" placeholder="Search Here" /> 
                <input class="submit" type="submit" name="submit" id="submit" value="Search" /> 
        </fieldset> 

    </form> 

</section> 

</header><!-- Header End --> 

<nav id="mainMenu"> 
        <ul> 
        <li><a href="#">Nav 1</a> 
        <ul><!--Sub Menu Hosting --> 
                <li><a href="#">Drop Down 1</a></li> 
        </ul><!-- Sub Menu Hosting Ends --> 
        </li> 
        <li><a href="#">Nav 2</a> 
        <ul><!-- Sub Menu Email --> 
                <li><a href="#">I want my own email</a></li> 
        </ul><!-- Sub Menu Email Ends --> 
        </li> 
        <li><a href="#">Nav 3</a> 
        <ul><!-- Sub Menu Support --> 
                <li><a href="#">Need Support?</a></li> 
                </ul><!-- Sub Menu Support Ends --> 
        </li> 
        <li><a href="#">Nav 3</a> 
        <ul><!-- Sub Menu About --> 
                <li><a href="#">About</a></li> 
        </ul><!-- Sub Menu About Ends --> 
        </li> 
        <li><a class="signup" href="#">SIGN UP</a></li> 
        </ul> 
</nav><!-- Main Menu End --> 

<div id="billboard"> 

    <h1 contenteditable="true">Cloud Hosting </h1> 

    <p>Hosting to take you way above the clouds</p> 

</div> 

<article id="services"> 

<section class="service1"> 
        <h2><a href="#">Plan 1</a></h2> 
        <p>Cloud hosting isn't difficult or expensive. OnApp lets hosts deploy clouds in a day, at very low cost.</p> 
        <p><a href="#" class="bullet">More</a></p> 
</section> 

<section class="service2"> 
        <h2><a href="#">Plan 2</a></h2> 
        <p>OnApp maximizes margins with high density, self-organizing clouds and an intuitive control panel.</p> 
        <p><a href="#" class="bullet">More</a></p> 

</section> 

<section class="service3"> 
        <h2><a href="#">Plan 3</a></h2> 
        <p>No more late-night fixes in the data center. OnApp has automatic failover and multi-layered security. </p> 
        <p><a href="#" class="bullet">More</a></p> 
</section> 

<section class="service4"> 
        <h2><a href="#">MS Exchange</a></h2> 
        <p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p> 
        <p><a href="#" class="bullet">More</a></p> 

</section> 

<section class="service5"> 
        <h2><a href="#">Domains</a></h2> 
        <p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p> 
        <p><a href="#" class="bullet">More</a></p> 
</section> 

</article><!-- Services End --> 

<div id="servicesBanner"> 
    <p>Services: </p> 
</div> 
<ul id="nav-footer"> 
<div id="col">           
</div>
<p>&copy</p> 
</div> <!-- container --> 

        </body> 
</html>

CSS:

body {
    line-height:1;
    font:12px normal helvetica,arial,sans-serif;
    color:gray;
    background:url(includes/images/body-bg.png) 0 0 repeat-x #efefef;
}

ol,ul {
    list-style:none;
}

blockquote,q {
    quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
    content:none;
}

h1 {
    margin-bottom:20px;
    font-size:36px;
    line-height:40px;
    color:#58585a;
    font-weight:700;
}

h2 {
    padding-bottom:9px;
    border-bottom:1px solid #e5e5e5;
    font-size:18px;
    line-height:30px;
    color:#58585a;
    font-weight:700;
    margin:40px 0 10px;
}

h3 {
    margin-bottom:3px;
    font-size:14px;
    line-height:20px;
    color:#58585a;
    font-weight:700;
}

h4 {
    font-size:12px;
    font-weight:700;
    color:#58585a;
    line-height:20px;
}

ol {
    list-style:decimal;
    margin:0 0 20px 16px;
}

strong {
    color:#4a4a4a;
}

.subheading {
    margin-bottom:40px;
    font-size:16px;
    line-height:24px;
}

h1.small {
    font-size:26px;
    line-height:36px;
}

#container {
    width:960px;
    margin:0 auto;
    padding:0 0 40px;
}

pre {
    border-left:2px solid #00afd8;
    background:url(/assets/img/pre-bg.png);
    font-size:12px;
    line-height:20px;
    width:620px;
    overflow:auto;
    overflow-y:hidden;
    margin:0;
    padding:0;
}

code {
    display:block;
    margin:0 0 0 10px;
}

header{
    z-index:100;
    margin-bottom:-30px;
    width:100%;
    height:100px;
}

header h1{
    font-family: 'Springsteel Lig', arial, serif; 

}

h1#logo,#logo a {
    display:block;
    left:0;
    top:30px;
    text-indent:-99999px;
    width:193px;
    height:41px;
    margin:0;
}

/* Main Menu */

#mainMenu{
    height:50px;
    margin:0 0 15px 0px;
    background-color:#6a6a6a;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

#mainMenu ul{
    display:inline;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
}

#mainMenu ul li{
    margin-left:0px;
    width:120px;
    height:56px;
    display:inline;
    position:relative;
}


#mainMenu li a {
    float:left;
    display:block;
    text-decoration:none;
    width:120px;
    height:35px;
    font-size:13px;
    line-height:45px;
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    padding-top:-4px;
    margin:0px;
}

#mainMenu li a:hover, #mainMenu li a:active{
    text-decoration:none;
    background-color:#7a7a7a;
    color:#fff;
    width:120px;
    height:50px;
   -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-topleft:2px;
    -moz-border-radius-topleft:2px;
}

#mainMenu .signup{
    background-color:#69c21c;
    height:50px;
    margin-left:360px;
   -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
}

#mainMenu .signup:hover{
    background-color:#00afd8;
}

/*mainMenu Sub Menu */

#mainMenu ul li ul{

    display:none;
    background-color:#7a7a7a;
}

#mainMenu ul li:hover ul{
    text-transform:none;
    display:block;
    position:absolute;
    width:115px;
    top:50px;
    right:-37px;
}

#mainMenu ul li:hover ul a{
    float:left;
    margin:0 0 0 -35px;
    line-height:35px;
    width:150px;
    height:35px;
    border:none;
    font-size:12px;
    text-align:left;
    text-transform:none;


}

#mainMenu  ul li ul li a:hover{    
    width:152px;
    height:30px;
    font-weight:bold;
    margin-left:-38px;
    line-height:35px;
}

footer{
    clear:both;
    border-top: 1px solid #d3d3d3;
    width:100%;
    height:50px;
}

#sales {
    width:160px;
    height:30px;
    float:right;
    margin-top:-140px;
    margin-right:215px;
}

/*Sales */
#sales p{    
    font-weight:bold;  
    text-align:center;
    line-height:45px;
}

/*Search Bpx */

#searchBox{

    float:right;
    margin-top:-125px;
}
#searchBoxForm{
    margin-top:10px;
}

#searchBoxForm .search {
    font-size: 11px;
    color: #fff;
    padding: 6px;
    border: 1px solid #b8b8b8;
    -moz-border-radius:2px; 
    border-radius:2px
}

#searchBoxForm .submit {
    background-color:#00afd8;
    width: 67px;
    height: 26px;
    border: none;
    color: #fff;
    cursor: pointer;
    -moz-border-radius:2px; 
    border-radius:2px
}
#searchBoxForm .submit:hover,
#searchBoxForm .submit.hover {
    background-color:#00afd8;
}


/* Billboard */

#billboard {
    min-height:240px;
    background:#00afd8;
    font-size:16px;
    line-height:24px;
    color:#fff;
    -webkit-border-top-left-radius:3px;
    -webkit-border-top-right-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-topright:3px;
    padding:34px 520px 60px 40px;
}
#billboard h1 {
    font-family:arial;
    margin-bottom:20px;
    font-size:36px;
    line-height:40px;
    color:#fff;
}


#billboard a {
    color:#fff;
    text-decoration:underline;
}

#services {
    background-color:#fff;
    -webkit-border-bottom-right-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-bottomright:3px;
    -moz-border-radius-bottomleft:3px;
}

#services a{
    text-decoration:none;
}

#services h2 {
    position:relative;
    border:0;
    background:url(/assets/img/sections/home/services-icons.png) 0 0 no-repeat;
    margin:-40px 0 3px;
    padding:0;
}

#services h2 a {
    display:block;
    color:#58585a;
    padding:94px 0 0;
}

#services .service1 {
    padding-left:20px;
    border-left:0;
}

#services .service2 h2 {
    background-position:-168px 0;
}

#services .service3 h2 {
    background-position:-336px 0;
}

#services .service4 h2 {
    background-position:-504px 0;
}

#services .service5 h2 {
    background-position:-672px 0;
}

#services .service1,.service2,.service3,.service4,.service5{
    float:left;
    background-color:#fff;
    border-left:1px solid #e5e5e5;
    width:154px;
    height:100%;
    padding:0 18px 0 19px;
    margin-bottom:10px;

}

#services img{
    height:100px;
    width:100px;
    margin:0 auto;
}

#servicesBanner{
    clear:both;
    width:100%;
    height:90px;
    margin:15px 0 10px 0;
    min-height:100%;
    background-color:#e0e0e0;
}

#servicesBanner p{
    padding:35px 0 0 8px;
    font-size:18px;
    color:#ccc;
}

/*Nav Content */

.subNavHeading{
    color:#fff;
    padding-top:10px;
    margin:9px 0 15px 45px;
}

/*Inner Page CSS */

#innerPageLeftCol{
    float:right;
    width:220px;
    min-height:100%;
    margin:-10px 0 10px 0;
}

#innerPageContent{
    background-color:#fff;
    float:left;
    width:720px;
    min-height:100%;
    margin-bottom:10px;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-top-left-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-topleft:2px;
}

.boxOne{
    background:url(../images/sidebarBox.png) no-repeat;
    width:220px;
    height:100%;
    min-height:100%;
    margin:10px 0 0 0;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-top-left-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-topleft:2px;
}

.boxOne li{
    margin:5px 0 0 0;
    padding-top:5px;
}

.boxOne a{
    text-decoration: none;
    color:#00afd8;
}

.boxTwo{
    background-color:#fff;
    width:220px;
    height:125px;
    margin:15px 0 0 0;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-top-left-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-topleft:2px;
}

.boxThree{
    background-color:#fff;
    width:220px;
    height:125px;
    margin:15px 0 5px 0;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
    -webkit-border-top-right-radius:2px;
    -webkit-border-top-left-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-topleft:2px;
}

#innerPageContent h1{
    margin:30px;
}

#innerPageContent .innerPageSubHeading{
    display:block;
    font-size:16px;
    margin:30px;
    width:450px;
}

#innerPage .separator{
    margin-top:20px;
    padding-top:20px;
}

#innerPageContent p{
    margin:30px;
}

#innerPageContent img{
    float:right;
    width:175px;
    height:175px;
    margin:30px;
    padding:3px;
}

/*Packages Template */

#packageContainer{
    width:320px;
    list-style:none;
    font-size:14px;
    color:#000;
    margin:0 auto;
}

#packageContainer .leftCol{
    width:35%;
    float:left;
    margin-bottom:10px;
}

#packageContainer .leftCol li{
    height:15px;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

#packageContainer .rightCol{
    width:35%;
    float:left;
    margin-bottom:10px;
}
#packageContainer .rightCol li{
    height:15px;
    text-indent:8px;
    border-bottom:1px solid #ccc;
}

#packageContainer .orderButton{
    float:left;
    margin:0px 20px 20px 65px;
    background:#00afd8;
    font-family:Helvetica,arial,sans-serif;
    font-size:12px;
    color:#fff;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    padding:6px 5px;
}

#innerPageProducts{
    clear:both;
    width:100%;
    height:90px;
    margin:10px 0 10px 0;
    min-height:100%;
    background-color:#e0e0e0;
}

#innerPageProducts p{
    padding:35px 0 0 8px;
    font-size:18px;
    color:#ccc;
}


/*Footer */
#nav-footer{
    margin: 20px 0 0 0;
    padding: 20px 0 20px 20px;
    border-top: 1px solid lightGrey;
    list-style: none;
    font-size: 11px;
}

#nav-footer #col{
        margin: 0 auto;
        display:inline-block;
        width:215px;
}

#nav-footer li{
    margin:10px 0 0 -10px;
    text-align:left;
}

#nav-footer li a{
    text-decoration:none;
}

#nav-footer ul{
    list-style:none;
}

#nav-footer .first{
    text-decoration:none;
    font-weight:bold;
    padding-left:30px;
}

我的菜单在 Chrome 中似乎对齐得很好 但是当我在 Firefox 5 中打开它时，我得到了 为什么？

答案 1:

我已经在 firefox 3.6 中的另一台计算机上进行了测试并得到:

HTML:

<nav id="mainMenu"> 

    <ul> 
    <li class="first"> 
        <a href="http://domain.co.nz/#">Domains</a> 
        <ul> 
            <li class="first"> 
                <a href="http://domain.co.nz/domains/transfer-my-domain">Transfer my Domain</a> 
            </li> 
            <li class="last"> 
                <a href="http://domain.co.nz/domains/get-a-domain-name">Get A Domain Name</a> 
            </li> 
        </ul> 
    </li> 
</ul> 
<ul> 
    <li class=""> 
        <a href="http://domain.co.nz/#">Hosting</a> 
        <ul> 
            <li class="first"> 
                <a href="http://domain.co.nz/hosting/website-hosting">Website Hosting</a> 
            </li> 
            <li class=""> 
                <a href="http://domain.co.nz/hosting/hosted-crm">Hosted CRM</a> 
            </li> 
            <li class="last"> 
                <a href="http://domain.co.nz/hosting/transfer-to-hostone">Transfer to HostOne</a> 
            </li> 
        </ul> 
    </li> 
</ul> 
<ul> 
    <li class="has_current"> 
        <a href="http://domain.co.nz/#">Email</a> 
        <ul> 
            <li class="first"> 
                <a href="http://domain.co.nz/email/personal-e-mail">Personal E-Mail</a> 
            </li> 
            <li class=""> 
                <a href="http://domain.co.nz/email/business-e">Business Email</a> 
            </li> 
            <li class="last current"> 
                <a href="http://domain.co.nz/email/microsoft-hosted-exchange">Microsoft Hosted Exchange</a> 
            </li> 
        </ul> 
    </li> 
</ul> 
<ul> 
    <li class=""> 
        <a href="http://domain.co.nz/support">Support</a> 
    </li> 
</ul> 
<ul> 
    <li class="signup last"> 
        <a href="http://domain.co.nz">SIGN UP</a> 
    </li> 
</ul> 

</nav><!-- Main Menu End --> 

CSS:

#mainMenu{
    height:50px;
    margin:0 0 15px 0px;
    background-color:#6a6a6a;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

#mainMenu ul{
    display:inline;
    -webkit-border-bottom-right-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-bottomright:2px;
    -moz-border-radius-bottomleft:2px;
}

#mainMenu ul li{
    margin-left:0px;
    width:120px;
    height:56px;
    display:inline;
    position:relative;
}


#mainMenu li a {
    float:left;
    display:block;
    text-decoration:none;
    width:120px;
    height:35px;
    font-size:13px;
    line-height:45px;
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    padding-top:-4px;
    margin:0px;
}

#mainMenu li a:hover, #mainMenu li a:active{
    text-decoration:none;
    background-color:#7a7a7a;
    color:#fff;
    width:120px;
    height:50px;
   -webkit-border-top-left-radius:2px;
    -webkit-border-bottom-left-radius:2px;
    -moz-border-radius-topleft:2px;
    -moz-border-radius-topleft:2px;
}

#mainMenu .signup a{
    background-color:#69c21c;
    height:50px;
    margin-left:360px;
   -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
}

#mainMenu li .signup a:hover{
    background-color:#00afd8;
}

/*mainMenu Sub Menu */

#mainMenu ul li ul{

    display:none;
    background-color:#7a7a7a;
}

#mainMenu ul li:hover ul{
    text-transform:none;
    display:block;
    position:absolute;
    width:135px;
    top:50px;
    right:-55px;
}

#mainMenu ul li:hover ul a{
    float:left;
    margin:0 0 0 -35px;
    line-height:35px;
    width:150px;
    height:35px;
    border:none;
    font-size:12px;
    text-align:left;
    text-transform:none;


}

#mainMenu  ul li ul li a:hover{    
    width:170px;
    height:30px;
    font-weight:bold;
    margin-left:-35px;
    line-height:35px;
}

Answer 1

好吧，我没有看到你所看到的，但我确实看到它在 FF 中有点困惑。我对您的几个 CSS 语句做了一些更改，它在 Chrome 和 FF 中工作。这是我所做的:

1. 更改了“#mainMenu ul li”删除了“display: inline;”添加了“ float :左；列表样式:无；”

   #mainMenu ul li
   {
       margin-left:0px;
       width:120px;
       height:56px;            
       position:relative;
       float: left;
       list-style: none;
   }
   

2. 添加了带有“float: right;”的“#mainMenu .signup”

   #mainMenu .signup
   {
       float: right;
   }
   

3. 删除了“margin-left: 360px;”来自“#mainMenu .signup a”

   #mainMenu .signup a
   {
       background-color:#69c21c;
       height:50px;
      -webkit-border-top-right-radius:2px;
      -webkit-border-bottom-right-radius:2px;
      -moz-border-radius-topright:2px;
      -moz-border-radius-bottomright:2px;
   }
   

现在，由于我在您的导航栏中使用了 float ，您可能希望在结束导航标记之后放置一个清晰的 div 以清除 float 并正常启动一个新的 div。

<div style="clear: both;">&nbsp;</div>