css布局的导航栏在IE8和火狐浏览器中，显示效果不一样，IE中每个项目之间没有间隙，而火狐中确有见下图：
上面的是IE8.0浏览器显示的，下面这张是火狐浏览器显示的。IE中每个项目之间，显示的没有间隙，而火狐中确有，怎么样才能把火狐的间隙给去掉。代码如下：CSS样式：@cha...
上面的是IE8.0浏览器显示的，下面这张是火狐浏览器显示的。IE中每个项目之间，显示的没有间隙，而火狐中确有，怎么样才能把火狐的间隙给去掉。
代码如下：
CSS样式：
@charset"utf-8";body{ margin:0px; padding:0px; font-famliy:新宋体; color:red; text-align:center;}
#container{ width:960px; margin:0 auto; text-align:left; }
#header{ width:100%; float:left; }
#header #logo{ width:200px; height:80px; background-color:red; float:left; margin-right:10px; }
#header #banner{ width:600px; height:80px; background-color:gray; float:left;}
#header #tool{ width:140px; height:80px; background-color:green; float:right;}
#header #menu{ width:100%; background-color:black; float:left;}
ul{ list-style:none; margin:0px; padding:0px;}
#main{ width:100%; height:670px; /* tem */ background-color:yellow; /* tem */ float:left;}#footer{ width:100%; height:50px; /* tem */ background-color:green; /* tem */ float:left;}
.nav{ width:100%; height:10px; clear:both; overflow:hidden}
HTML代码：
<html> <head> <mate http-equiv="Content-type" content="text/html;charset:utf-8"/> <title>css网页布局</title> <link rel="stylesheet" type="text/css" href="css/layer.css"/> </head>
<body> <div id="container"> <div id="header"> <div id="logo"> </div> <div id="banner"> </div> <div id="tool"> </div> <div class="nav"></div> <div id="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">公司介绍</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">资料下载</a></li> <li><a href="#">联系我们</a></li> </ul>
</div> </div> <div class="nav"></div> <div id="main">
</div> <div class="nav"></div> <div id="footer">
</div> </div> </body>
</html> 展开
代码如下：
CSS样式：
@charset"utf-8";body{ margin:0px; padding:0px; font-famliy:新宋体; color:red; text-align:center;}
#container{ width:960px; margin:0 auto; text-align:left; }
#header{ width:100%; float:left; }
#header #logo{ width:200px; height:80px; background-color:red; float:left; margin-right:10px; }
#header #banner{ width:600px; height:80px; background-color:gray; float:left;}
#header #tool{ width:140px; height:80px; background-color:green; float:right;}
#header #menu{ width:100%; background-color:black; float:left;}
ul{ list-style:none; margin:0px; padding:0px;}
#main{ width:100%; height:670px; /* tem */ background-color:yellow; /* tem */ float:left;}#footer{ width:100%; height:50px; /* tem */ background-color:green; /* tem */ float:left;}
.nav{ width:100%; height:10px; clear:both; overflow:hidden}
HTML代码：
<html> <head> <mate http-equiv="Content-type" content="text/html;charset:utf-8"/> <title>css网页布局</title> <link rel="stylesheet" type="text/css" href="css/layer.css"/> </head>
<body> <div id="container"> <div id="header"> <div id="logo"> </div> <div id="banner"> </div> <div id="tool"> </div> <div class="nav"></div> <div id="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">公司介绍</a></li> <li><a href="#">产品展示</a></li> <li><a href="#">资料下载</a></li> <li><a href="#">联系我们</a></li> </ul>
</div> </div> <div class="nav"></div> <div id="main">
</div> <div class="nav"></div> <div id="footer">
</div> </div> </body>
</html> 展开
3个回答
展开全部
ie、ff兼容，仅提供#menu代码：
<style>
* { margin:0; padding:0;}
html { background-color:#000; color:red; font-family:"新宋体";}
div#menu { width:960px; margin:0 auto;}
a { color:#0CF; font-size:14px;}
div#menu li { line-height:20px; height:20px;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">公司介绍</a></li>
<li><a href="#">产品展示</a></li>
<li><a href="#">资料下载</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
mune下的LI标签需要定义高度和文本行高，这样才能使其在各浏览器中的高度保持一致！
追问
定义了行高，文本行高，火狐和IE的还是不一样。
你在我的那个代码上插入行高和文本高，就只到了。
追答
我贴的代码放入新建html页面内看效果！
* { margin:0; padding:0;} 加上！ ul/li/dl/dt/dd ....这些默认有padding属性值，不设定会有默认属性导致高度不一致。
你写的太乱，看了头疼。
新建html页面内看效果！
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我倒是没看出来什么空隙，不过我发现你的代码有几处错误
你的html没有申明文档类型，过渡型也好，严格型也好，或者html5的<!DOCTYPE html>也好，总之一定要声明一下，不然浏览器进入了怪异模式，很多错误就没办法解释清楚了
你<mate http-equiv="Content-type" content="text/html;charset:utf-8"/>这里写错了2个地方，正确的是<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />，因为GB2312的1个汉字占2个字，utf-8的一个汉字占3个字符，所以符编码没有写对也有可能会导致你说的问题
还有就是css里 font-famliy:新宋体;你又拼写错误了 font-family:"宋体";
建议：用一个代码高亮的编辑器，还有写代码要细心一点：）
追问
刚开始学，有的地方写错了，多谢指出，非常感谢！！~~~~~~~~~~
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
您好！很高兴为您答疑！
火狐下您可以安装Firebug检查下页面代码，错误部分会自动提示。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
火狐下您可以安装Firebug检查下页面代码，错误部分会自动提示。
您可以在火狐社区了解更多内容。希望我的回答对您有所帮助，如有疑问，欢迎继续在本平台咨询。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
