html - 如何调整不同浏览器的导航设计？

我是网页设计新手。我下载了一个模板来创建一个网站，但是我的导航栏在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}

最佳答案

您需要使用Conditional CSS。