关于兼容性，。。

smartcoach 2012-04-10 07:38:58
网页的导航条在ie里正常显示，可是在ff中就消失

代码如下：

css代码：


nav{
margin-bottom:10px;
width:990px;
line-height:30px;
list-style-type:none;
background-image:url(../images/search_bg.jpg); /* 定义盒子的宽高及背景图片*/



}
#nav a
{
font-size :14px; /* 定义超链接未访问的时候状态*/
display:block;
width:165px;
text-align:center;
}
#nav a:link{ /* 定义超链接样式*/
color:#fff;
text-decoration:none;
}
#nav a:visited{ /* 定义超链接访问过后的状态*/
color:#fff;
text-decoration:none;
}
#nav a:hover{ /* 定义鼠标滑过超链接时候状态*/
background-image:url(../images/a_hover.jpg);
text-decoration:none;
font-weight:bold;
color:Blue;
}#nav li{
float:left;
width:160px;

}
#nav li a:hover{ /* 定义列表里超链接鼠标滑过整块li的时候状态*/
background-color:Green;
}
#nav li ul{ /* 定义下拉菜单的状态*/
line-height:24px;
list-style-type:none;
text-align:left;
left:-999em;/*这句就是关键的隐藏下拉菜单，也可以使用display：none的方法*/
width:165px;
position:absolute;
}
#nav li ul li{ /*顶一下拉菜单中的li的状态*/
float:left;
width: 165px;
background:#4490CE
}
#nav li ul a{ /*定义下拉菜单中超链接标签未访问的状态*/
display:block;
width:165px;
text-align:center;
}#nav li ul a:link{ /*定义超链接项的状态*/
color:#000;
text-decoration:none;
}
#nav li ul a:visited{ /*定义超链接项访问后的状态*/
color:#000;
text-decoration:none;
}
#nav li ul a:hover{ /*定义超链接项访问中的状态*/
color:#fff;
text-decoration:none;
font-weight:normal;
background:#000;
}#nav li:hover ul{
left:auto;
}
#nav li.sfhover ul{
left:auto;
}


html代码：

<div class="bar">
<ul id="nav">
<li ><a href="Default.aspx" style="width: 164px">首页</a>
</li>
<li><a href="brief.aspx">关于网能达</a>
<ul>
<li style="left: 0px; top: 0px"><a href="brief.aspx">公司简介</a></li>
<li><a href="culture.aspx"> 企业文化</a></li>
<li><a href="talk.aspx";>咨询反馈</a></li>
<li><a href="adminlogin.aspx";>进入后台</a></li>
</ul>
</li>
<li><a href="com_progress.aspx">公司动态</a>
<ul>
<li><a href="com_progress.aspx">发展进程</a></li>
<li><a href="future.aspx">未来规划</a></li>
</ul>
</li>
<li><a href="product.aspx";>产品介绍</a>
<ul>
<li><a href="product.aspx";>产品展示</a></li>
<li><a href="product/pro.aspx";>资质证书</a></li>
</ul>
</li>
<li><a href="coorperation.aspx" style="width: 159px">商务合作</a>
<ul>
<li><a href="coorperation.aspx">合作信息</a></li>
<li><a href="coorperation.aspx">联系方式</a></li>
</ul>
</li>
<li><a href="join.aspx" style="width: 164px">加入网能达</a>
<ul>
<li><a href="join.aspx">招聘信息</a></li>
<li><a href="join.aspx">招聘电话</a></li>
</ul>
</li>
</ul>
</div>
...全文
92 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
smartcoach 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 的回复:]

你把全部样式，还有整个页面发来看看，那个bar的样式呢
[/Quote]模板页

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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" >
<head runat="server">
<title>深圳网能达公司</title>
<link rel="stylesheet" type="text/css" href="images/Master.css"/>
<script type="text/javascript" src="images/bar.js"></script>
<asp:ContentPlaceHolder id="header" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="xbody" >
<div class="head">
<ul>
<li><a href="Default.aspx"><span><img src="images/logo.gif" alt="" style="width: 228px"/></span></a></li>


</ul>
</div>
<div class="bar">
<ul id="nav">
<li ><a href="Default.aspx" style="width: 164px">首页</a>
</li>
<li><a href="brief.aspx">关于网能达</a>
<ul>
<li style="left: 0px; top: 0px"><a href="brief.aspx">公司简介</a></li>
<li><a href="culture.aspx"> 企业文化</a></li>
<li><a href="talk.aspx";>咨询反馈</a></li>
<li><a href="adminlogin.aspx";>进入后台</a></li>
</ul>
</li>
<li><a href="com_progress.aspx">公司动态</a>
<ul>
<li><a href="com_progress.aspx">发展进程</a></li>
<li><a href="future.aspx">未来规划</a></li>
</ul>
</li>
<li><a href="product.aspx";>产品介绍</a>
<ul>
<li><a href="product.aspx";>产品展示</a></li>
<li><a href="product/pro.aspx";>资质证书</a></li>
</ul>
</li>
<li><a href="coorperation.aspx" style="width: 159px">商务合作</a>
<ul>
<li><a href="coorperation.aspx">合作信息</a></li>
<li><a href="coorperation.aspx">联系方式</a></li>
</ul>
</li>
<li><a href="join.aspx" style="width: 164px">加入网能达</a>
<ul>
<li><a href="join.aspx">招聘信息</a></li>
<li><a href="join.aspx">招聘电话</a></li>
</ul>
</li>
</ul>
</div>
<div>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</div>
</div>
<div class="footer">
<p>Copyright © 2012深圳市网能达科技有限公司 All rights reserved </p>
</div>
</form>
</body>
</html>


css

body {text-align:center;background-repeat:no-repeat; width:990px; margin:0 auto; padding:0px; background:url(../images/body_sky.jpg) no-repeat;}
div,form,ul,ol,li,span,p{ border:0px; padding:0px; margin:0px; font-size:12px;list-style:none;}
ul,ol,li{list-style:none}
a{color:Black; text-decoration:none;}
a:hover{color:Red;}
img{ border:none;}

.xbody{width:990px; text-align:left; margin:0 auto; height:95%;}
.head{height:100px; }
.head li{ float:left;}
.for{position: relative; left:900px; top:70px; font-size:16px; font-style:italic; font-weight:bolder;}


#nav{
margin-bottom:10px;
width:990px;
line-height：30px；
list-style-type:none;
background-image:url(../images/search_bg.jpg); /* 定义盒子的宽高及背景图片*/



}
#nav a
{
font-size :14px; /* 定义超链接未访问的时候状态*/
display:block;
width:165px;
text-align:center;
}
#nav a:link{ /* 定义超链接样式*/
color:Maroon;
text-decoration:none;
}
#nav a:visited{ /* 定义超链接访问过后的状态*/
color:Lime;
text-decoration:none;
}
#nav a:hover{ /* 定义鼠标滑过超链接时候状态*/
background-image:url(../images/a_hover.jpg);
text-decoration:none;
font-weight:bold;
color:Blue;
}#nav li{
float:left;
width:160px;

}
#nav li a:hover{ /* 定义列表里超链接鼠标滑过整块li的时候状态*/
background-color:Green;
}
#nav li ul{ /* 定义下拉菜单的状态*/
line-height:24px;
list-style-type:none;
text-align:left;
left:-999em;/*这句就是关键的隐藏下拉菜单，也可以使用display：none的方法*/
width:165px;
position:absolute;
}
#nav li ul li{ /*顶一下拉菜单中的li的状态*/
float:left;
width: 165px;
background:#4490CE
}
#nav li ul a{ /*定义下拉菜单中超链接标签未访问的状态*/
display:block;
width:165px;
text-align:center;
}#nav li ul a:link{ /*定义超链接项的状态*/
color:#000;
text-decoration:none;
}
#nav li ul a:visited{ /*定义超链接项访问后的状态*/
color:#000;
text-decoration:none;
}
#nav li ul a:hover{ /*定义超链接项访问中的状态*/
color:#fff;
text-decoration:none;
font-weight:normal;
background:#000;
}#nav li:hover ul{
left:auto;
}
#nav li.sfhover ul{
left:auto;
}

.footer
{ margin-bottom:0px;
text-align:center;
background-image:url(../images/foot_bg.jpg);

}
天下在我心 2012-04-11
  • 打赏
  • 举报
 回复
用图品做背景，也许需要你固定div的宽和高 要不就是设置背景图片的repeat。这里你好像都没有
zhou_xuexi 2012-04-11
  • 打赏
  • 举报
 回复
你把全部样式，还有整个页面发来看看，那个bar的样式呢
smartcoach 2012-04-11
  • 打赏
  • 举报
 回复
来人来看下啊！
smartcoach 2012-04-11
  • 打赏
  • 举报
 回复
在线顶，求大师，求指教，求批评
smartcoach 2012-04-11
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

消失指什么消失
看了下 还以为是空白 你这样式设计的太有创意了
[/Quote]额。。。求大师指教。什么问题啊，第一次做网站
Mirror然 2012-04-10
  • 打赏
  • 举报
 回复
消失指什么消失
看了下 还以为是空白 你这样式设计的太有创意了
46种常见的浏览器兼容性问题大汇总
1. HTML对象获取问题 3 2. const问题 3 3. event.x与event.y问题 3 4. window.location.href问题 3 5. frame问题 3 6. 模态和非模态窗口问题 3 7. firefox与IE的父元素(parentElement)的区别 3 8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event.srcElement问题 3 13. body载入问题 3 14. 事件委托方法 3 15. Table操作问题 3 16. 对象宽高赋值问题 3 Ø CSS 3 1. cursor:hand VS cursor:pointer 3 2. innerText在IE中能正常工作，但在FireFox中却不行. 3 3. CSS透明 3 4. css中的width和padding 3 5. FF和IE BOX模型解释不一致导致相差2px 3 6. IE5 和IE6的BOX解释不一致 3 7. ul和ol列表缩进问题 3 8. 元素水平居中问题 3 9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 3 16. 高度不适应 3 17. IE6下图片下有空隙产生 3 18. 对齐文本与文本输入框 3 19. LI中内容超过长度后以省略号显示 3 20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右高度的容器 3 22. 链接(a标签)的边框与背景 3 23. 超链接访问过后hover样式就不出现的问题 3 24. FORM标签 3 25. 属性选择器(这个不能算是兼容,是隐藏css的一个bug) 3 26. 为什么FF下文本无法撑开容器的高度 3
IE6 绿色 兼容win764位
ie6,兼容win7 64位100%完美运行,找了好久的，不容易的
Outlook_Express_6 for win7/win8
Outlook_Express_6 for win7 win7中Outlook_Express_6 没有了，但他简洁，好用，这是从ie6中提取出来的，
非ie内核浏览器activex支持插件
非ie内核浏览器activex支持插件， 可在非ie内核浏览器中调用activex控件。
javascript城市选择器插件
本插件使用原生javascript编写，兼容IE6及以上浏览器，兼容chrome,opera,firefox,safari等主流浏览器。 1.代码淅晰，兼容性良好。 2.使用简单，提供使用用例 3.不依赖于任何库，采用原生js编写 4.插件界面简洁清爽 有此插件的截图效果，请看我的博客，地址如下： http://blog.csdn.net/zhou1988217/article/details/7459985 此插件仅供学习交流使用，感谢您的支持！
.NET社区

62,268

社区成员

668,981

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章