收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1600|回复: 3

请教为什么这段滑动门在FF和IE7下不正常~

[复制链接]
发表于 2007-6-10 01:10:14 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript">
  7. //中部滑动门开始
  8. //进行选项卡1效果的触发
  9. function switchTabs(cardBars,cardsId){
  10.     //读取cardBars下面所有li标签
  11.         var mItems = document.getElementById(cardBars).getElementsByTagName("li");   
  12.         //循环清空li标签下面的selectedA效果
  13.         for (i=0;i<mItems.length;i++){
  14.                 var x=mItems[i];
  15.                 x.className="";
  16.                 var y=x.getElementsByTagName("a");
  17.                 y[0].style.color="#000000";
  18.         }
  19.         //开始选项卡效果的赋值,为选中的li标签增加selectedA类的属性
  20.         document.getElementById(cardsId).className="SelectedA";
  21.         //读出cardContents 下面的所有div标签
  22.         var dvs=document.getElementById("cardContents").getElementsByTagName("div");
  23.         //循环,判断应该显示的div
  24.         for (i=0;i<dvs.length;i++){
  25.                 if (dvs[i].id==(cardsId)){
  26.                         dvs[i].style.display="block";
  27.                 }else{
  28.                         dvs[i].style.display="none";
  29.                 }
  30.         }
  31. }
  32. //进行选项卡2效果的触发
  33. function switchTab(cardBar,cardId){
  34.     //读取cardBar下面所有li标签
  35.     var oItems = document.getElementById(cardBar).getElementsByTagName("li");   
  36.     //循环清空li标签下面的selected效果
  37.     for (i=0;i<oItems.length;i++ ){
  38.         var x=oItems[i];
  39.         x.className="";
  40.         var y=x.getElementsByTagName("a");
  41.         y[0].style.color="#000000";
  42.     }
  43.     //开始选项卡效果的赋值,为选中的li标签增加selected类的属性
  44.     document.getElementById(cardId).className="Selected";
  45.     //读出cardContent 下面的所有div标签
  46.     var dvs=document.getElementById("cardContent").getElementsByTagName("div");
  47.     //循环,判断应该显示的div
  48.     for (i=0;i<dvs.length;i++ ){
  49.         if (dvs[i].id==("D"+cardId)){
  50.             dvs[i].style.display="block";
  51.         }else{
  52.             dvs[i].style.display="none";
  53.         }
  54.     }
  55. }
  56. //中部滑动门结束
  57. </script>
  58. <style type="text/css">
  59. <!--
  60. /*滑动门样式开始*/
  61. .single_ranknav01 {
  62.         float: left;
  63.         height: 52px;
  64.         list-style-type: none;
  65.         margin-top: 54px;
  66.         margin-left: 9px;
  67.         display: inline;
  68.         width: 250px;
  69. }
  70. .single_ranknav02 {
  71.         display: inline;
  72.         float: left;
  73.         height: 52px;
  74.         list-style-type: none;
  75.         width: 250px;
  76.         margin-top: 54px;
  77.         margin-left: 20px;
  78. }
  79. ul.cardUl{
  80.         font-size:12px;
  81.         list-style-type:none;
  82.         height:20px;
  83.         line-height: 25px;
  84.         letter-spacing: 7px;
  85. }
  86. /*默认样式下使用css文件*/
  87. ul.cardUl li{
  88.         height:16px;
  89.         float:left;
  90.         margin-right:1px;
  91.         padding-left:6px; /*为滑动门另一边提供空间*/
  92.         background-image: url(http://www.lming.cn/attachments/month_0706/g20076417255.gif);
  93.         background-repeat: no-repeat;
  94.         background-position: left top;
  95.         width: 42px;
  96. }
  97. ul.cardUl li a:link {
  98.         color: #000000;
  99. }
  100. ul.cardUl li a:visited {
  101.         color: #000000;
  102. }
  103. ul.cardUl li a:hover {
  104.         color: #000000;
  105. }

  106. ul.cardUl li a{
  107.         float:left;
  108.         height:20px;
  109.         display:block;/*让文字能够够居中*/
  110.         color:#000000;
  111.         white-space: nowrap;
  112.         background-image: url(http://www.lming.cn/attachments/month_0706/z200764172528.gif);
  113.         background-repeat: no-repeat;
  114.         background-position: right top;
  115.         padding-top: 2px;
  116.         padding-right: 10px;
  117.         padding-left: 4px;
  118. }
  119. /*文字点击使用CSS*/
  120. ul.cardUl li.Selected{
  121.         background-image: url(http://www.lming.cn/attachments/month_0706/u200764172418.gif);
  122.         background-repeat: no-repeat;
  123.         background-position: left top;
  124. }
  125. ul.cardUl li.Selected a{
  126.         background-image: url(http://www.lming.cn/attachments/month_0706/y200764172443.gif);
  127.         background-repeat: no-repeat;
  128.         background-position: right top;
  129.         text-decoration: none;
  130.         color: #000000;
  131. }
  132. ul.cardsUl {
  133.         font-size:12px;
  134.         list-style-type:none;
  135.         height:20px;
  136.         letter-spacing: 7px;
  137.         line-height: 25px;
  138. }
  139. ul.cardsUl a:link {
  140.         color: #000000;
  141. }
  142. ul.cardsUl a:visited {
  143.         color: #000000;
  144. }
  145. ul.cardsUl a:hover {
  146.         color: #000000;
  147. }

  148. ul.cardsUl li {
  149.         height:16px;
  150.         float:left;
  151.         margin-right:1px; /*为滑动门另一边提供空间*/
  152.         background-image: url(http://www.lming.cn/attachments/month_0706/g20076417255.gif);
  153.         background-repeat: no-repeat;
  154.         background-position: left top;
  155.         width: 42px;
  156.         padding-left: 6px;
  157. }
  158. ul.cardsUl li a {
  159.         float:left;
  160.         height:20px;
  161.         display:block;/*让文字能够够居中*/
  162.         color:#000000;
  163.         white-space: nowrap;
  164.         background-image: url(http://www.lming.cn/attachments/month_0706/z200764172528.gif);
  165.         background-repeat: no-repeat;
  166.         background-position: right top;
  167.         padding-top: 2px;
  168.         padding-left: 4px;
  169.         padding-right: 10px;
  170. }
  171. ul.cardsUl li.SelectedA {
  172.         background-image: url(http://www.lming.cn/attachments/month_0706/u200764172418.gif);
  173.         background-repeat: no-repeat;
  174.         background-position: left top;
  175. }
  176. ul.cardsUl li.SelectedA a {
  177.         background-image: url(http://www.lming.cn/attachments/month_0706/y200764172443.gif);
  178.         background-repeat: no-repeat;
  179.         background-position: right top;
  180.         text-decoration: none;
  181.         color: #000000;
  182. }
  183. body {
  184.         margin-left: 0px;
  185.         margin-top: 0px;
  186.         margin-right: 0px;
  187.         margin-bottom: 0px;
  188. }
  189. .song_rank_single {
  190.         float: left;
  191.         height: 170px;
  192.         width: 240px;
  193.         display: inline;
  194.         margin-left: 8px;
  195.         background-color: #00FF00;
  196.         margin-top: 7px;
  197. }
  198. .song_rank_ranking {
  199.         background-color: #FFFF00;
  200.         float: right;
  201.         height: 170px;
  202.         width: 276px;
  203.         display: inline;
  204.         margin-right: 8px;
  205.         margin-top: 7px;
  206. }
  207. .song_rank {
  208.         float: left;
  209.         height: 296px;
  210.         width: 590px;
  211.         background-color: #EBEBEB;
  212.         margin-top: 4px;
  213.         margin-left: 3px;
  214.         border-right-width: 1px;
  215.         border-bottom-width: 1px;
  216.         border-right-style: solid;
  217.         border-bottom-style: solid;
  218.         border-right-color: #C4C4C4;
  219.         border-bottom-color: #C4C4C4;
  220. }
  221. div.hackBoxA {
  222.         display:none;
  223. }
  224. div.hackBox {
  225.         display:none;
  226. }
  227. -->
  228. </style>
  229. </head>

  230. <body>
  231. <div class="song_rank">
  232.   <div class="single_ranknav01">
  233.         <ul class="cardsUl" id="cardBars">
  234.                 <li id="cards1" class="SelectedA">
  235.                 <a href="#" onmouseover="javascript:switchTabs('cardBars','cards1');">第一</a></li>
  236.                 <li id="cards2"><a href="#" onmouseover="javascript:switchTabs('cardBars','cards2');">第二</a></li>
  237.                 <li id="cards3"><a href="#" onmouseover="javascript:switchTabs('cardBars','cards3');">第三</a></li>
  238.                 <li id="cards4"><a href="#" onmouseover="javascript:switchTabs('cardBars','cards4');">第四</a></li>
  239.         </ul>
  240.   </div>

  241.     <div class="single_ranknav02">       
  242.         <ul class="cardUl" id="cardBar">
  243.         <li id="card1">
  244.                 <a href="#" onmouseover="javascript:switchTab('cardBar','card1');">第四</a></li>
  245.         <li id="card2"><a href="#" onmouseover="javascript:switchTab('cardBar','card2');">第三</a></li>
  246.         <li id="card3"><a href="#" onmouseover="javascript:switchTab('cardBar','card3');">第二</a></li>
  247.         <li id="card4" class="Selected"><a href="#" onmouseover="javascript:switchTab('cardBar','card4');">第一</a></li>
  248.     </ul>
  249.         </div>
  250.         <div class="song_rank_single" id="cardContents">
  251.             <div id="cards1" class="hackBoxA" style="display:block">代码一</div>
  252.                 <div id="cards2" class="hackBoxA">代码二</div>
  253.                 <div id="cards3" class="hackBoxA">代码三</div>
  254.                 <div id="cards4" class="hackBoxA">代码四</div>
  255.         </div>
  256.     <div class="song_rank_ranking" id="cardContent">
  257.             <div id="Dcard1" class="hackBox">代码四</div>
  258.         <div id="Dcard2" class="hackBox">代码三</div>
  259.         <div id="Dcard3" class="hackBox">代码二</div>
  260.         <div id="Dcard4" class="hackBox" style="display:block">代码一</div>
  261.         </div>
  262. </div>
  263. </body>
  264. </html>
复制代码

 提示:您可以先修改部分代码再运行


滑动门的菜单部分在FF和IE7下都显示不正常,在IE6下可以正常工作,请问是哪里出问题了?

[[i] 本帖最后由 winsonlei 于 2007-6-10 01:14 编辑 ]
发表于 2007-6-10 09:16:01 | 显示全部楼层
css的问题,奈何又臭又长,看得头晕

建议精简到出现问题的最少代码
回复 支持 反对

使用道具 举报

发表于 2007-6-10 09:25:03 | 显示全部楼层
楼主最好在FF下先调好了再在IE下看..
回复 支持 反对

使用道具 举报

发表于 2007-6-10 09:29:21 | 显示全部楼层
是不太一样,肯定是CSS的问题!代码好乱啊!精减到最小的代码量再测试一下,应该很快能解决!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-10-28 10:35 , Processed in 0.094490 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表