求助：jQuery的fadeIn在ie6的问题

dzvsyt 2010-12-03 10:00:07
做了一个tab切换效果，在ie7,FF中都正常，在ie6中就会错位，请各位高手帮忙看看

ie7,ff中运行的效果图：


在ie6中的运行效果图：
1、

2、鼠标放上去后错位效果
...全文
752 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
dzvsyt 2010-12-03
  • 打赏
  • 举报
 回复
hch126163 能否具体说明一下css的兼容问题
hch126163 2010-12-03
  • 打赏
  • 举报
 回复
上面连接 复制错了 http://blog.csdn.net/hch126163/archive/2010/12/02/6050485.aspx
hch126163 2010-12-03
  • 打赏
  • 举报
 回复
那是css 兼容问题

给你一个例子

js 无插件选项卡 支持自动改变选中项
dzvsyt 2010-12-03
  • 打赏
  • 举报
 回复
这是js代码：
function changetab(current) {

for (i = 1; i <= 8; i++) {
$("#a" + i).fadeTo("fast",1);
$("#navcontent" + i).hide();
}

$("#a" + current).fadeTo("fast", 0);
$("#navcontent" +current).fadeIn("fast");
$("#navcontent" + current + "").fadeTo("fast", 0.9);
}
function changetabhide(i) {
$("#navcontent" + i).hide();
$("#a" + i).fadeTo("fast", 1);
}

html代码：

<!--导航 start-->
<div id="navcontent_container">
<div id="navcontent1" style="display:none;">
<div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(1);" title="关闭">中心简介</a></div>
<div class="navcontent_title">南昌瓷板画研究中心简介</div>
<div class="navcontent_bottom"></div>
</div>
<div id="navcontent2" style="display:none;">
<div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(2);" style="margin-left:103px;">新闻动态</a></div>
<div class="navcontent_title">新闻动态内容</div>
<div class="navcontent_bottom"></div>
</div>
<div id="navcontent3" style="display:none;">
<div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(3);" style="margin-left:103px;">大师介绍</a></div>
<div class="navcontent_title">大师介绍的内容</div>
<div class="navcontent_bottom"></div>
</div>
<div id="navcontent4" style="display:none;">
<div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(4);" style="margin-left:103px;">作品展示</a></div>
<div class="navcontent_title">作品展示</div>
<div class="navcontent_bottom"></div>
</div>
<div id="navcontent5" style="display:none;">
<div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(5);" style="margin-left:103px;">教学培训招生</a></div>
<div class="navcontent_title">教学培训招生</div>
<div class="navcontent_bottom"></div>
</div>
<div id="navcontent6" style="display:none;">
<div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(6);" style="margin-left:103px;">在线留言</a></div>
<div class="navcontent_title">在线留言</div>
<div class="navcontent_bottom"></div>
</div>
<div id="navcontent7" style="display:none;">
<div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(7);" style="margin-left:103px;">下载专区</a></div>
<div class="navcontent_title">下载专区</div>
<div class="navcontent_bottom"></div>
</div>
<div id="navcontent8" style="display:none;">
<div class="navcontent_top"><a href="#" class="tablink" onclick="changetabhide(8);" style="margin-left:183px;">联系方式</a></div>
<div class="navcontent_title">联系方式</div>
<div class="navcontent_bottom"></div>
</div>
</div>
<div id="navigate">
<a href="#" class="tablink" id="a1" onmouseover="changetab(1);">中心简介</a>
<a href="#" class="tablink" id="a2" onmouseover="changetab(2);">新闻动态</a>
<a href="#" class="tablink" id="a3" onmouseover="changetab(3);">大师介绍</a>
<a href="#" class="tablink" id="a4" onmouseover="changetab(4);">作品展示</a>
<a href="#" class="tablink" id="a5" onmouseover="changetab(5);">教学培训招生</a>
<a href="#" class="tablink" id="a6" onmouseover="changetab(6);">在线留言</a>
<a href="#" class="tablink" id="a7" onmouseover="changetab(7);">下载专区</a>
<a href="#" class="tablink" id="a8" onmouseover="changetab(8);">联系方式</a>
</div>
<!--导航 end-->
dzvsyt 2010-12-03
  • 打赏
  • 举报
 回复
已解决，确实是css兼容的问题．

如以下代码在ie7或ff中显示时是正常，外层的div不会被撑开，但在ie6中是会被撑开的：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>

<div style="height: 35px; width: 648px; background-color: #6600CC; position: relative; top: 285px; left: 52px;">
<div style="float:left;width: 200px; height: 400px; background-color: #00CC00; position: relative; z-index: 1; top: -230px; left: 82px;">
</div>
</div>
</body>
</html>


再稍做修改，把内层div的position属性换成absolute，在ie6,ie7和ff 中运行外层的div都不会被撑开了

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>

<div style="height: 35px; width: 648px; background-color: #6600CC; position: relative; top: 285px; left: 52px;">
<div style="float:left;width: 200px; height: 400px; background-color: #00CC00; position: absolute; z-index: 1; top: -230px; left: 82px;">
</div>
</div>


</body>
</html>


jQuery实战小知识
1.jQuery通常对任何需要执行操作（除了那些微不足道的JavaScript操作）的页面都非常有用，而且也高度关注如何帮助页面开发者在页面中使用不唐突的JavaScript。采用jQuery的解决方案，把行为从结构中分离出来，正如把...
js实现图片切换-整理
以前用jQuery的hide() show() toggle() fadeIn() fadeOut() fadeTo() 这几个函数实现切换图片时的图片消失和显现过程。 　比如说： 　$("#play_list a").filter(":visible").fadeOut(1000).parent().children().eq...
jq-选择器
一、jq的介绍 做什么？作用 用更少的代码，解决更多的需求 可以不用 ... 个人建议：现阶段jq能... jquery其实就是别人封装好的函数，有很多功能，可以直接使用，不用考虑原理 怎么做？语法 学习的内容 ...
个人动态网站，大型个人主题网站
*** 个人主题网站动态*** 自己做的一个有关自己类似于博客网站的web页面，里面很多按钮都是可以与鼠标互动发光，但是图片展现不了。...meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
精通javascript 第七章: JavaScript与CSS
那么做过之后，用户可以更快地操作而更少地把时间浪费在等待页面加载上。将动态技术与第六章提出的事件方面的观念相结合，对于实现无缝而强大的用户体验是非常重要的。 　层叠式样式表是用来对易用的、有吸引力的...
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章