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

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 .