如何調整不同瀏覽器的導航設計？

當談到網頁設計時，我是一個小菜鳥。我下載了一個模板來創建一個網站，但是我的導航欄在Chrome中看起來很棒，但在FireFox中沒有正確定位，並且它的一部分在IE中沒有正確定位。以下是我的代碼。我不確定這個模板是在開始調整之後還是在開始調整之後。我第一次開始使用時，只使用了Chrome進行預覽。如何調整不同瀏覽器的導航設計？

HTML

<nav> 
      <ul id="menu"> 
       <li class="alpha" id="menu_active"><a href="index.html"><span><span>Home</span></span></a></li> 
       <li><a href="Whatisllf.html"><span><span>What is LLF?</span></span> </a></li> 
       <li><a href="TeamManagement.html"><span><span>Team Management</span></span></a></li> 
       <li><a href="PlayerData.html"><span><span>Player Data</span></span></a></li> 
       <li><a href="PostSeason.html"><span><span>Post Season</span></span></a></li> 
       <li><a href="Forums.html"><span><span>Forums</span></span></a></li> 
       <li class="omega"><a href="PrivacyPolicy.html"><span><span>Privacy Policy</span></span></a></li> 
      </ul> 
     </nav>

CSS

#menu {width:100%;overflow:hidden;margin-top:3px} 
#menu li {float: left;} 
#menu a {display:block;font-size:16px;font-weight:400;color:#000;background:url(../images/menu.gif) top repeat-x;line-height:55px;text-decoration:none} 
#menu li span {display:block;background:url(../images/menu_left.gif) top left no-repeat} 
#menu .alpha span {background:url(../images/left_menu.gif) top left no-repeat} 
#menu .alpha a:hover span,#menu .alpha#menu_active a span {background:url(../images/left_menu_active.gif) top left no-repeat} 
#menu .omega span span {background:url(../images/right_menu.gif) top right no-repeat} 
#menu .omega a:hover span span,#menu .omega#menu_active a span span {background:url(../images/right_menu_active.gif) top right no-repeat} 
#menu li span span,#menu .alpha span span {background:url(../images/menu_right.gif) top right no-repeat;padding:0 24px} 
#menu a:hover,#menu #menu_active a {color:#fff;background:url(../images/menu_active.gif) top repeat-x} 
#menu a:hover span,#menu #menu_active a span {background:url(../images/menu_left_active.gif) top left no-repeat} 
#menu a:hover span span,#menu #menu_active a span span,#menu .alpha#menu_active a span span,#menu .alpha a:hover span span {background:url(../images/menu_right_active.gif) tp right no-repeat}

來源

2012-07-12 Ernie Gomes

您需要使用Conditional CSS。

來源

2012-07-12 18:44:57 ODelibalta

好吧，現在我看到這適用於IE，但不適用於Firefox ...我該怎麼辦Firefox？ – 2012-07-12 19:16:25

我不確定您是否可以對所有瀏覽器類型使用CSS。您可能需要爲此使用JavaScript。看看[這裏]（http://www.quirksmode.org/js/detect.html） – ODelibalta 2012-07-12 19:19:57

如何調整不同瀏覽器的導航設計？

回答

相關問題