IE6bug及tab列表的切换解决办法
日期：2014-05-17 浏览次数：20685 次
IE6bug及tab列表的切换
怎样才能让ie6的效果与其他的效果一样呢？麻烦各位帮忙解答解答，万分感谢！
ie7+及FF的效果
IE6的效果
我的源代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{padding:40px;font:12px/1.5 "新宋体", "微软雅黑", "Arial Black";color:#666;}
div{padding:20px;height:200px;}
.box{border:1px solid #09F;padding:0px;width:510px;max-height:200px;}
.tab{list-style:none;width:500px;height:27px;_position:relative;z-index:2;_overflow:hidden;border-bottom:1px solid #09F;padding-left:10px;_line-height:1px;}
.tab li{width:100px;height:23px;_position:relative;z-index:10;line-height:25px;text-align:center;border:1px solid #09F;background:#E9F3F3;*margin-right:3px;margin-top:3px;display:inline-block;*display:inline;zoom:1;}
.tab li.current{border-bottom:1px solid #fff;background:#fff;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").not(".box").hide();
$(".tab li").mouseover(function(){
var sty=$(this).attr("class");
$(this).addClass("current").siblings().removeClass("current");
$("div:not('.box')").hide();$("div#"+sty+"_1").show();
}).eq(2).trigger("mouseover");
});
</script>
</head>
<body>
<div class="box">
<ul class="tab">
<li class="one">常用网址</li>
<li class="two">资讯类</li>
<li class="three">购物类</li>
<li class="four">娱乐</li>
</ul>
<div id="one_1">jisdfjalsfjkdsf</div>
<div id="two_1"> j23345566666666</div>
<div id="three_1">LSJFDKSFJSAKDLFKSDFLFSAFADSF</div>
<div id="four_1">乱收费的监控萨附近奥斯卡的房间</div>
</div>
</body>
</html>
------解决方案--------------------
请点击阅读：tabs选项卡切换效果（jquery版）。
------解决方案--------------------
<style type="text/css">
*{margin:0;padding:0;}
body{padding:40px;font:12px/1.5 "新宋体", "微软雅黑", "Arial Black";color:#666;}
.box{border:1px solid #09F;width:510px;height:330px;position:relative;}
.tab{list-style:none;width:500px;height:27px;_overflow:hidden;border-bottom:1px solid #09F;padding-left:10px;}
.tab li{width:100px;height:23px;overflow:hidden;line-height:25px;text-align:center;border:1px solid #09F;background:#E9F3F3;*margin-right:3px;margin-top:3px;float:left;zoom:1;border-bottom:none;margin-right:8px;z-index:9999;position:relative;}
.tab li.current{background:#fff;height:24px;}
</style>
终于让我给解决了
换掉你的css就哦了
怎样才能让ie6的效果与其他的效果一样呢？麻烦各位帮忙解答解答，万分感谢！
ie7+及FF的效果
IE6的效果
我的源代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{padding:40px;font:12px/1.5 "新宋体", "微软雅黑", "Arial Black";color:#666;}
div{padding:20px;height:200px;}
.box{border:1px solid #09F;padding:0px;width:510px;max-height:200px;}
.tab{list-style:none;width:500px;height:27px;_position:relative;z-index:2;_overflow:hidden;border-bottom:1px solid #09F;padding-left:10px;_line-height:1px;}
.tab li{width:100px;height:23px;_position:relative;z-index:10;line-height:25px;text-align:center;border:1px solid #09F;background:#E9F3F3;*margin-right:3px;margin-top:3px;display:inline-block;*display:inline;zoom:1;}
.tab li.current{border-bottom:1px solid #fff;background:#fff;}
</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").not(".box").hide();
$(".tab li").mouseover(function(){
var sty=$(this).attr("class");
$(this).addClass("current").siblings().removeClass("current");
$("div:not('.box')").hide();$("div#"+sty+"_1").show();
}).eq(2).trigger("mouseover");
});
</script>
</head>
<body>
<div class="box">
<ul class="tab">
<li class="one">常用网址</li>
<li class="two">资讯类</li>
<li class="three">购物类</li>
<li class="four">娱乐</li>
</ul>
<div id="one_1">jisdfjalsfjkdsf</div>
<div id="two_1"> j23345566666666</div>
<div id="three_1">LSJFDKSFJSAKDLFKSDFLFSAFADSF</div>
<div id="four_1">乱收费的监控萨附近奥斯卡的房间</div>
</div>
</body>
</html>
ie6bug
------解决方案--------------------
请点击阅读：tabs选项卡切换效果（jquery版）。
------解决方案--------------------
<style type="text/css">
*{margin:0;padding:0;}
body{padding:40px;font:12px/1.5 "新宋体", "微软雅黑", "Arial Black";color:#666;}
.box{border:1px solid #09F;width:510px;height:330px;position:relative;}
.tab{list-style:none;width:500px;height:27px;_overflow:hidden;border-bottom:1px solid #09F;padding-left:10px;}
.tab li{width:100px;height:23px;overflow:hidden;line-height:25px;text-align:center;border:1px solid #09F;background:#E9F3F3;*margin-right:3px;margin-top:3px;float:left;zoom:1;border-bottom:none;margin-right:8px;z-index:9999;position:relative;}
.tab li.current{background:#fff;height:24px;}
</style>
终于让我给解决了
换掉你的css就哦了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
