<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>支持IE和Firefox的div+css选项卡</title>
<style type="text/css" media="all">
/*TAB布局*/
#tab * {font-size:12px;} /* 字体大小 */
#tab h3 a {display:inline-block;}
#tab h3 a {display:block;}
#tab {position:relative;}
#tab h3,#tab ul,#tab div,#tab li {margin:0;padding:0;list-style-type:none;}
#tab ul li {position:absolute;left:0;top:0;float:left;display:block;width:100px;height:30px;font-size:0;}
#tab ul li#tab2 {left:100px;}
#tab ul li#tab3 {left:200px;}
#tab ul li#tab4 {left:300px;}
#tab ul li div {position:absolute;clear:both;}
#tab ul li div#oDIV2 {left:-100px;}
#tab ul li div#oDIV3 {left:-200px;}
#tab ul li div#oDIV4 {left:-300px;}
/*TAB-标题修饰*/
#tab,#tab ul li div,#tab ul li div li {width:410px;}/* 设置总宽度[width] */
#tab {height:200px;background:#ccc;overflow:hidden;}/* 设置总高度[height]、标题背景颜色[background] */
#tab ul li h3 a {height:18px;padding:5px 0 2px;margin:5px 0px 1px 5px;text-align:center;border:solid #ccc 1px;border-bottom:none;color:#333;}/* 标题默认状态 */
#tab ul li h3 a:hover {background-color:#bbbbbb;border-color:#bbbbbb;}/* 鼠标经过状态 */
#tab ul li.up h3 a {background:#999;border-color:#fff #999 #999 #fff;color:#fff;}/* 当前窗口状态 */
#tab ul li div {border:solid #999;border-width:1px 0;background:#f7f7f7;height:167px;}/* 设置内容高度[height]、背景颜色[background]、上下分割线[border] */
/*TAB1效果[ol/li]*/
#tab ul li #oDIV1 ol {margin:8px;padding:0;}
#tab ul li #oDIV1 ol li {position:static;float:none;font-size:0;height:auto;}
#tab ul li #oDIV1 ol li a {font-size:12px;display:block;padding:5px 0 1px;}
/*TAB2效果[img]*/
#tab ul li #oDIV2 img {margin:8px;border:none;}
/*TAB3效果[iframe]*/
#tab ul li #oDIV3 iframe {border:none;width:440px;height:157px;margin:5px;}
</style>
<script type="text/javascript">
<!--
function toggleTo(img)
{
var ts=document.getElementById("tab").getElementsByTagName("div");
for(i=1;i<ts.length+1;i++){
if(img==i)
{
document.getElementById("oDIV"+i).style.display = "";
document.getElementById("oDIV"+i).parentNode.className+=" up";
}
else{
document.getElementById("oDIV"+i).style.display = "none";
document.getElementById("oDIV"+i).parentNode.className="tab"+i;
}
}
}
-->
</script>
</head>
<body>
<div id="tab">
<ul>
<li id="tab1" class="up"><h3><a href="####" onclick="javascript:toggleTo(1)">支付</a></h3>
<!-- onclick鼠标释放,onmousemove鼠标经过。 -->
<div id="oDIV1">
<ol>
<li><a href="####"><span>使该元素在FireFox下获得高度从而显示背景</span></a></li>
<li><a href="####"><span>为了保证浏览器的兼容性</span></a></li>
<li><a href="####"><span>文本对齐方式改回默认left</span></a></li>
<li><a href="####"><span>左右自适应[FireFox居中方式]</span></a></li>
<li><a href="####"><span>内容对齐方式为居中[IE居中方式]</span></a></li>
<li><a href="####"><span>内容对齐方式为居中[IE居中方式]</span></a></li>
</ol>
</div>
</li>
<li id="tab2"><h3><a href="####" onclick="javascript:toggleTo(2)">软件下载</a></h3>
<div id="oDIV2" style="display:none;">
<a href="####"><img src="http://blogbeta.blueidea.com/images/img/Rerl.gif" alt="播放软件下载" /></a>
<a href="####"><img src="http://blogbeta.blueidea.com/images/img/linkedu.gif" alt="播放软件下载" /></a></div>
</li>
<li id="tab3"><h3><a href="####" onclick="javascript:toggleTo(3)">问题答疑</a></h3>
<div id="oDIV3" style="display:none;"><iframe frameborder="0" scrolling="auto" src="http://pr.idcx.com"></iframe></div>
</li>
<li id="tab4"><h3><a href="####" onclick="javascript:toggleTo(4)">客服</a></h3>
<div id="oDIV4" style="display:none;"><a href="####">22222</a></div>
</li>
</ul>
</div>
</body>
</html>
分享到:
相关推荐
DIV+CSS+JS静态分页程序可兼容主流浏览器(IE、FF、Opera) DIV+CSS表格(用DIV+CSS做的表格像素表格) 内容不多但是绝对实用,其实在做数据显示时还是推荐用表格,因为不是所有的地方数据显示有用DIV+CSS,在数据...
DIV+CSS_IE-FF兼容 DIV+CSS_IE-FF兼容 DIV+CSS_IE-FF兼容 DIV+CSS_IE-FF兼容
DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器
DIV+CSS 兼容性 IE FF 了解个浏览器之间的差异与共同点
超详细的DIV+CSS设计时IE6、IE7、FF 与兼容性有关的特性
DIV+css兼容性FFIE6IE7IE8IE9[借鉴].pdf
DIV+CSS解决IE6,IE7,IE8,FF兼容问题
Div+CSS布局实例归纳 在网页设计中,Div+CSS布局是一种非常流行的布局方式,特别是在现代网页设计中,它的应用非常广泛。... Div+CSS布局只是网页设计的一部分,我们需要不断学习和实践来提高我们的网页设计能力。
在学习DIV+CSS时,许多新手都会遇到一些常见的问题,本文总结了八个常见的问题和解决方案,涵盖了网页居中显示、文字垂直居中显示、图片垂直居中显示、清除浮动、多列结构的DIV写法、Textarea在FireFox中不能自动...
讲述多浏览器兼容。包括ie6 ie7 ie8 FF 谷歌浏览器 等。一切ie核心等等。对于网页设计师来说 必备不可!
background-color: #ff9933; /*背景颜色*/ font-size: 30px; /*文字字号*/ font-weight: bold; /*文字粗体*/ text-align: center; /*水平居中*/ } img{ float:left; /*左浮动*/ border: 1px #9999cc ...
关于div+css兼容IE和firefox的问题 好不容易建立的div+css网页完全符合W3C标准。在ie7下显示非常完美,用firefox一测试,乖乖一探糊涂 惨不忍睹。经过一番研究发现兼容很 简单。 1、增加 div {overflow: hidden;}...
本文向大家简单描述一下DIV+CSS相对IE6 IE7和IE8兼容问题整理,重点介绍一下IE6 IE7和IE8等浏览器的区别和联系,相信本文介绍一定会让你有所收获。 DIV+CSS相对IE6 IE7和IE8兼容问题整理 1.区别IE和非IE浏览器 ...
在IE6和FF中的效果如下: 在IE6中,对content_a应用向左的浮动后,content_a向左浮动,content_b在水平方向仅跟着它的后面。 在FF中,对content_a应用向左的浮动后,content_b在水平方向容器不可见,只留下了文字...
站长推荐全新兼容DIV+CSS版中国地图 JS+DIV+CSS支持热点效果的中国地图 16.支持4级树形 展开菜单插件dTree原版下载 2)JQuery Tab 1.jQuery.Switchable常见网页UI组件(整合Tabs、Slide、Scrollable等插件) 2....
能全方位的解决浏览器兼容问题,解决ie与ff浏览器的一些棘手问题
style type="text/css"> <!-- body { margin:0px; font-size:13px; font-family:Arial; } #container{ position:relative; width:100%; } #banner{ height:80px; border:1px solid #000000; text-...
div css完美兼容IE6,IE7,FF的通用方法说明。
CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div...
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!