一段javascript代码在IE里失效，火狐里正常，求高手帮忙

答案:2 悬赏:40 手机版

解决时间 2021-05-01 16:10

提问者网友：雾里闻花香
2021-05-01 11:06

<html>
<head>
<title>如此简单就实现了CSS滑动门</title>
<style type="text/css">
.hdm ul li { list-style: none; }
.hdm ul, li { margin: 0; padding: 0;}
.tabs,.tabs_act{color:#000000;text-decoration:none;font-weight:bold;float:left;width:102.5px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;height:25px;text-align:center;line-height:25px;display:block;}
.tabs_act{font-weight:bold;color:#0a72e8;text-decoration:none;border-bottom:1px solid #fff;background:url( http://www.91um.com/templets/image/cnwest/tabbg.gif) repeat-x;height:27px;}
.Sliding_tab{width:205px;border-left:1px solid #ccc;height:27px;}
.Sliding_tab li{float:left;border-top:1px solid #ccc;}
.Sliding_tab li.table_li{border-bottom:1px solid #ccc;border-top:0px;width:305px;height:26px;line-height:26px;}
.tablist {background:#f6f6f6;clear:both; width:205px;border:1px solid #ccc;border-top:0px;height:300px;overflow:hidden;}
</style>
<SCRIPT language=javascript type=text/javascript>
    function g(o){return document.getElementById(o);}
       function Hovertab(num,counts,tabname,tabclass){
          for (i=1;i<=counts;i++)          {
             g(tabname+'tab0'+i).className=tabclass+'tabs';
              g(tabname+'div0'+i).style.display='none';
         }
            g(tabname+'tab0'+num).className=tabclass+'tabs_act';
              g(tabname+'div0'+num).style.display='block';
     }   </SCRIPT>
</HEAD>
<BODY>
<div class="hdm">
<DIV class="Sliding_tab">
<UL>
<LI><A class=tabs_act id=set_tab01 onMouseOver="Hovertab('1','2','set_','');" href="#">新手必读</A></LI>
<LI><A class=tabs id=set_tab02 onMouseOver="Hovertab('2','2','set_','');" href="#">AJAX</A> </LI>
</UL>
</DIV>
<DIV class=tablist id=set_div01>新手必读</DIV>
<DIV class=tablist id=set_div02 style="DISPLAY: none">内容</DIV>
</div>
</BODY>
</HTML>

火狐里生效，但是样式有点问题，IE里失效。求高手帮忙修改下。

IE里：

火狐里：

正常的：

最佳答案

五星知识达人网友：一叶十三刺
2021-05-01 11:57

我以前写的代码。。觉得很适合你用.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
*{margin:0;padding:0;}
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
.clearfix {display:block;}
ul{margin:10px 10px 0;}
ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom}
ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;}
ul li .crent{background:#fff;color:#f60;}
p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;}
</style>
<title>Example</title>
<script type="text/javascript">
function $(objID){
    return "string" == typeof(objID) ? document.getElementById(objID) : objID;
    }

全部回答

1楼网友：你可爱的野爹
2021-05-01 12:57

这不是javascript的问题，这是CSS样式的问题，最好先使用reset.css初始化CSS各种属性，以提高兼容性，并且尽可能少用padding,margin等属性

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息