我有一个网页。我的问题是，我看到的不同浏览器。这里有一些解释问题的屏幕截图：
铬：
http://airsimmers.com/Chrome.PNG
这太完美了。我能很好地看到标题菜单，并在使用下拉菜单上的边框。
Firefox：
http://airsimmers.com/firefox.PNG
对于firefox，我看不到顶部菜单(可能是因为overflow:hidden的性能不好)。如果你看到下拉菜单上的边框很糟糕。下拉列表被分离到导航栏。我认为问题出在页边空白处(你会在代码中看到)。
InternetExplorer:
http://airsimmers.com/IE.PNG
在IE中，我看到了顶部栏，但下拉菜单上的边框很糟糕。下拉列表也与导航栏分离(小于firefox)。
这里有代码：
index.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link type="text/css" rel="stylesheet" href="./lib/css/layout.css" media="all"/>
</head>
<body>
<div id="headerbar">
Hello World
</div>
<div id="mainmenu-bar">
<div id="mainmenu-content">
<img src="./lib/images/logo.png" height="75" width="75" style="float:left;margin-top:5px;"/>
<h1 style="color:white; float:left; margin-bottom:0px; display:inline-block;">X-Sky</h1>
<div id="mainmenu">
<ul>
<li>
<a href="#">Inicio</a>
</li>
<li>
<a class="menuitem" href="#">Acerca de</a>
<ul>
<li><a href="#">Producto</a></li>
<li><a href="#">Nosotros</a></li>
</ul>
</li>
<li>
<a class="menuitem" href="#">Servicios</a>
<ul>
<li><a href="#">Servicio uno</a></li>
<li><a href="#">Servicio dos</a></li>
<li><a href="#">Servicio tres</a></li>
<li><a href="#">Servicio cuatro</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="content">
<h1 color="white">Hello World</h1>
</div>
</body>
</html>
布局.css
@font-face{font-family: Maven Pro; src: url(../fonts/MavenPro-Regular.ttf);}
body{font-family:Maven Pro; background:#ECECEC; border:0; font-size:100%; vertical-align:baseline; margin:0; padding:0;}
#headerbar{height:30px; float:right; margin-right:20px; margin-top:5px;}
/*MAIN MENU BAR*/
#mainmenu-bar{background:#4C84BC; width:100%; height:90px; overflow: hidden;}
#mainmenu-content{margin: 0 auto; width:1000px;}
#mainmenu{margin-top:35px; display:inline-block;}
#mainmenu ul li{float: left; margin-right: 20px; list-style: none;}
#mainmenu ul li a {color:#FFF; text-decoration: none; font-size:20px; margin-left:25px;}
#mainmenu ul li a:hover {color: #FCD100;}
#mainmenu ul li ul a {color: #000; font-size:16px; margin-left:10px; margin-top:10px; margin-bottom:10px; display: block;}
#mainmenu ul ul {display: none; padding: 0px; position: absolute; width: auto; margin-left: 0px;}
#mainmenu ul li:hover>ul {background: #fff; width:220px; border-right:1px solid #a4a4a4; margin-top:16px; z-index:9; position: absolute; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); border-top:3px solid #FCD100; display: block;}
#mainmenu ul ul li {float: none;position: relative; text-decoration: none; display: block;}
#mainmenu ul ul li a{text-decoration: none;}
.menuitem {padding:0px 0px 11px;}
#mainmenu ul li:hover>.menuitem{border-bottom:5px solid #FCD100;}
注意：很抱歉，我第一次混淆了index.php。现在可以了！现在您可以在此处尝试代码：http://jsfiddle.net/jaGwr/
尝试在#headerbardiv 之后添加清除
<body>
<div id="headerbar">
Hello World
</div>
<!-- add this -->
<div style="clear:both;"></div>
<!-- end -->
<div id="mainmenu-bar">
{... }
可选地，如果你想要，你可以添加一个css clear样式类，而不是内联
.clearBoth {clear:both;}