無法弄清楚爲什麼頁面在Firefox中看起來很可怕？在Chrome/IE中看起來不錯

這是我一直在努力的一段時間，我無法弄清楚爲什麼索引頁在Firefox中看起來很糟糕。所有其他網頁似乎都很好。我剛剛完成了模擬頁面並對整個JavaScript文件進行了編程，但我對HTML非常不滿。請注意，我從一個模板開始（從那以後進行了大量更改）。任何人都可以引導我在正確的方向嗎？頁碼：www.fsaesim.com/index.html。無法弄清楚爲什麼頁面在Firefox中看起來很可怕？在Chrome/IE中看起來不錯

我在樣式中缺少什麼？

編輯：注意前面的圖片看起來有多糟糕，頂部菜單欄的圖標不會出現，它只是看起來不平衡。在IE/Chrome中打開，然後在Firefox中打開以查看失敗。

來源

2011-09-01 Spets

順便說一句，對於這樣的佈局，你應該給一個CSS網格框架試試吧！它會從一開始就解決幾個問題。試一試Blue Print（http://www.blueprintcss.org/）或960 Grid System（http://960.gs/），我相信你不會後悔！ – balexandre

@balex +1 for CSS框架。這些框架幾乎可以減少100％跨瀏覽器出現問題的風險。而且它們使用起來非常簡單。 – Cygnusx1

謝謝你們會做！ – Spets

嘗試圖像DIV移動到導航容器的外面是這樣的：

<header> 
    <div class="wrapper"> 
     <h1><a href="index.html" id="logo">Progress Business Company</a></h1> 
    <nav> 
      <ul id="menu"> 
       <li id="nav1" class="active"><a href="index.html">Home<span>Page</span></a></li> 
     <li id="nav2"><a href="news.html">News<span>Updates</span></a></li> 
      <li id="nav3"><a href="documentation.html">Available<span>Features</span></a></li> 
     <li id="nav4"><a href="simulation.html">Run<span>Simulation</span></a></li> 
     <li id="nav5"><a href="contact.html">Contact<span>Support</span></a></li> 
      </ul> 
    </nav> 
    </div> 
    <div style="overflow: hidden; width: 940px; height: 450px;" align="center"> 
     <div style="margin-top: 50px; background-color: White; height: 500px;" align="center"> 
      <img src="images/mainpic3.jpg" alt="" /> 
     </div> 
    </div> 
</header>

來源

2011-09-01 19:24:04 dSquared

這固定了它！我無法理解我的生活。我想它與nav標籤共享相同的屬性？非常感謝！ – Spets

沒問題，很高興幫助！ – dSquared

把拿着你的「mainpic.jpg」的div移到你的「nav」塊下面。你可能需要在前面提到的div上添加一個清晰的CSS樣式。

來源

2011-09-01 19:13:51

問題是你已經用float：right來設置你的ul＃菜單的樣式。因此，在Firefox中，兄弟分享共享相同的行爲。指定一個明確的float:left以避免這種情況。

<nav> 
     <ul id="menu"> 
    ... 
     </ul> 
     <div align="center" style="overflow: hidden; width: 940px; height: 450px; float: left;"> 
      ... 
     </div> 
    </nav>

來源

2011-09-01 19:17:35 Jonas

這實際上是一個非常簡單的修復。在你的ul導航和圖像div之間添加<div style="clear:both"></div>，清除你在導航菜單中設置的右浮動，然後將圖像對齊到中心。測試它在螢火蟲和它工作正常。

來源

2011-09-01 19:18:19

無法弄清楚爲什麼頁面在Firefox中看起來很可怕？在Chrome/IE中看起來不錯

回答

相關問題