跨瀏覽器顯示問題

在進一步的調查中，我發現在我的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; 
}

我的菜單，似乎在人權委員會對準精ome Chrome 但是當我在Firefox 5中打開它時，我得到了 this 爲什麼？

答1：

我已經在Firefox 3.6中的另一臺計算機上測試並獲得： enter image description here

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; 
}

來源

2011-07-09 Jess McKenzie

你能舉一些例子HTML代碼嗎？它只是幫助確定什麼是ul和li。 –

完成:)對不起， –

亞倫，請參閱上面已更新的問題 –

好的，我沒有看到你正在看到的是什麼，但我確實看到它在FF中有點搞砸了。我對一些CSS語句做了一些修改，並且在Chrome和FF中工作。下面是我做的：

改變「#mainMenu UL李」去掉「顯示：內聯;」添加「float：left; list-style：none;」

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

增加「#mainMenu .signup」具有「浮動：右;」
```
#mainMenu .signup 
{ 
    float: right; 
} 
```

刪除「margin-left：360px」從「#mainMenu .signup一個」

#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; 
}

現在，因爲我在你的導航欄使用花車，你可能會想提出一個明確的div收盤導航標籤後清除浮動，並開始一個新的格通常。

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

來源

2011-07-10 05:28:03

感謝亞倫我已經實現您的更改，但它仍然是相同的firefox已清除緩存 –

我不知道你的附加組件之一是否導致問題。嘗試使用FF配置文件管理器打開一個準系統Firefox實例，看看你是否仍然看到這個問題：http://kb.mozillazine.org/Profile_manager –

這是否正確顯示你？ http://jsfiddle.net/DN3dR/1/ –

跨瀏覽器顯示問題

回答

相關問題