如何针对不同的浏览器调整导航设计

Question

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

Answer 1

您需要使用Conditional CSS。