如何修改成ie也是对的

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.tw{}
.tw li img{
width:50px; height:29px; border:1px solid #999999; float:left; margin:3px; margin-right:5px;
}
.tw li{
padding:3px;
font-size:12px;
list-style:none;
border-bottom:1px solid #F1F7F9;
}
.tw li.on{
padding:3px;
font-size:12px;
list-style:none;
border-bottom:1px solid #F1F7F9;
background-color:#F7F7F7;
}
.tw li dt{
padding:1px;
font-weight:bold
}
.tw li dt.on{
padding:1px;
font-weight:bold;
color:#FF0000
}
.tw li dd{
padding:1px;
color:#999999
}
.tw li dl{
padding-top:3px;
padding-bottom:3px;
}
</style>
</head><body>
<div>
 <ul id='tw' class="tw">
   <li style="border-top:1px solid #F7F7F7" mce_style="border-top:1px solid #999999">
       <img src="http://img.kankan.xunlei.com/img//pic/1980.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1980.jpg" >
        <dl>
             <dt>《红河》金像奖新科影帝张家辉力作</dt>
             <dd>张家辉张静初挑战激情戏上演禁忌爱情 </dd>
        </dl>
   </li>
   <li>
       <img src="http://img.kankan.xunlei.com/img//pic/1961.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1961.jpg" >
        <dl>
             <dt>《秘密列车》高智商谍战惊悚悬疑剧</dt>
             <dd>计中计案中案，剧情环环相扣引人入胜</dd>
        </dl>   
   </li>
   <li>
       <img src="http://img.kankan.xunlei.com/img//pic/1974.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1974.jpg" >
        <dl>
             <dt>《星际迷航》经典科幻史诗再度归来</dt>
             <dd>北美票房冠军，比《金刚狼》更受欢迎</dd>
        </dl>
   </li>
   <li>
       <img src="http://img.kankan.xunlei.com/img//pic/1977.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1977.jpg" >
        <dl>
             <dt>《渴望》中国电视剧发展史的里程碑</dt>
             <dd>犯罪率骤降，据说小偷都跑去看该剧了</dd>
        </dl>
   </li>   
   </ul>
</div>
<script>
function $(Id){return document.getElementById(Id);};
 var forEach = function(array, callback, thisObject){
   for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
 }
 var lis = $('tw').getElementsByTagName('li')
 forEach(lis,function(o, i){
  o.onmouseover = function(){ o.className = "on";o.getElementsByTagName('dt')[0].className = "on"}
  o.onmouseout = function(){  o.className = "";o.getElementsByTagName('dt')[0].className = ""}
 })
</script>
</body>
</html>主要问题是第一个  剩下的2个问题不是太重要这个东西在ff下显示 基本正确
1.在ie下错位了  郁闷
各位大虾帮忙修改下2.顺便问一下  关于宽段自适应 一般是用 display:inline-block
但是用到这里 又错位了  郁闷 该如何解决了？？？3.可以把li的样式 和dt的样式合成一个吗？
o.className = "on";o.getElementsByTagName('dt')[0].className = "on"  这样写起来比较麻烦,合在一起就好多了

解决方案 »

  1.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    .tw{}
    .tw li img{
    width:50px; height:29px; border:1px solid #999999; float:left; margin:3px; margin-right:5px;
    }
    .tw li{
    padding:3px;
    font-size:12px;
    list-style:none;
    border-bottom:1px solid #F1F7F9;
    }
    .tw li.on{
    padding:3px;
    font-size:12px;
    list-style:none;
    border-bottom:1px solid #F1F7F9;
    background-color:#F7F7F7;
    }
    .tw li dt{
    padding:1px;
    font-weight:bold;
    }
    .tw li dt.on{
    padding:1px;
    font-weight:bold;
    color:#FF0000
    }
    .tw li dd{
    padding:1px;
    color:#999999;
    }
    .tw li dl{
    padding-top:3px;
    padding-bottom:3px;
    }*.tw li dl{
    padding-top:3px;
    padding-bottom:3px;
    margin:2px 0px;
    }
    </style>
    </head><body>
    <div>
     <ul id='tw' class="tw">
       <li style="border-top:1px solid #F7F7F7" mce_style="border-top:1px solid #999999">
          <img src="http://img.kankan.xunlei.com/img//pic/1980.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1980.jpg" >
            <dl>
                 <dt>《红河》金像奖新科影帝张家辉力作</dt>
                 <dd>张家辉张静初挑战激情戏上演禁忌爱情</dd>
            </dl>
       </li>
       <li>
           <img src="http://img.kankan.xunlei.com/img//pic/1961.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1961.jpg" >
            <dl>
                 <dt>《秘密列车》高智商谍战惊悚悬疑剧</dt>
                 <dd>计中计案中案，剧情环环相扣引人入胜</dd>
            </dl>   
       </li>
       <li>
           <img src="http://img.kankan.xunlei.com/img//pic/1974.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1974.jpg" >
            <dl>
                 <dt>《星际迷航》经典科幻史诗再度归来</dt>
                 <dd>北美票房冠军，比《金刚狼》更受欢迎</dd>
            </dl>
       </li>
       <li>
           <img src="http://img.kankan.xunlei.com/img//pic/1977.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1977.jpg" >
            <dl>
                 <dt>《渴望》中国电视剧发展史的里程碑</dt>
                 <dd>犯罪率骤降，据说小偷都跑去看该剧了</dd>
            </dl>
       </li>   
       </ul>
    </div>
    <script>
    function $(Id){return document.getElementById(Id);};
     var forEach = function(array, callback, thisObject){
       for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
     }
     var lis = $('tw').getElementsByTagName('li')
     forEach(lis,function(o, i){
      o.onmouseover = function(){ o.className = "on";o.getElementsByTagName('dt')[0].className = "on"}
      o.onmouseout = function(){  o.className = "";o.getElementsByTagName('dt')[0].className = ""}
     })
    </script>
    </body>
    </html>
      

  2.   

    第2个的意思是 宽度自适应
    另外  Ls你测试了吗 上面的代码 
    我在i6下 还是原来的样子的...............
      

  3.   

    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    .tw{}
    .tw li img{
    width:50px; height:29px; border:1px solid #999999; float:left; margin:3px; margin-right:5px;
    }
    .tw li{
    padding:3px;
    font-size:12px;
    list-style:none;
    border-bottom:1px solid #F1F7F9;
    height:30px;
    }
    .tw li.on{
    padding:3px;
    font-size:12px;
    list-style:none;
    border-bottom:1px solid #F1F7F9;
    background-color:#F7F7F7;
    }
    .tw li dt{
    padding:1px;
    font-weight:bold
    }
    .tw li dt.on{
    padding:1px;
    font-weight:bold;
    color:#FF0000
    }
    .tw li dd{
    padding:1px;
    color:#999999
    }
    .tw li dl{
    display:inline;
    padding-top:3px;
    padding-bottom:3px;
    }
    .tw li img{
    float:left;margin-top:3px;
    }
    </style>
    </head><body>
    <div>
     <ul id='tw' class="tw">
       <li style="border-top:1px solid #F7F7F7" mce_style="border-top:1px solid #999999">
           <img src="http://img.kankan.xunlei.com/img//pic/1980.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1980.jpg" >
            <dl>
                 <dt>《红河》金像奖新科影帝张家辉力作</dt>
                 <dd>张家辉张静初挑战激情戏上演禁忌爱情 </dd>
            </dl>
       </li>
       <li>
           <img src="http://img.kankan.xunlei.com/img//pic/1961.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1961.jpg" >
            <dl>
                 <dt>《秘密列车》高智商谍战惊悚悬疑剧</dt>
                 <dd>计中计案中案，剧情环环相扣引人入胜</dd>
            </dl>   
       </li>
       <li>
           <img src="http://img.kankan.xunlei.com/img//pic/1974.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1974.jpg" >
            <dl>
                 <dt>《星际迷航》经典科幻史诗再度归来</dt>
                 <dd>北美票房冠军，比《金刚狼》更受欢迎</dd>
            </dl>
       </li>
       <li>
           <img src="http://img.kankan.xunlei.com/img//pic/1977.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1977.jpg" >
            <dl>
                 <dt>《渴望》中国电视剧发展史的里程碑</dt>
                 <dd>犯罪率骤降，据说小偷都跑去看该剧了</dd>
            </dl>
       </li>   
       </ul>
    </div>
    <script>
    function $(Id){return document.getElementById(Id);};
     var forEach = function(array, callback, thisObject){
       for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
     }
     var lis = $('tw').getElementsByTagName('li')
     forEach(lis,function(o, i){
      o.onmouseover = function(){ o.className = "on";o.getElementsByTagName('dt')[0].className = "on"}
      o.onmouseout = function(){  o.className = "";o.getElementsByTagName('dt')[0].className = ""}
     })
    </script>
    </body>
    </html>
      

  4.   

    主要是dl的inline但是因为IE判断的是IMG也DL的第一行是同等位置的.所以要压一下.
    好像有个样式可以控制的.不我记得了.
      

  5.   

    我是IE8的，里面是正常的，刚才我用IE7打开的时候也发现问题了，正在改……
      

  6.   

    http://bbs.blueidea.com/viewthread.php?tid=2922149<!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    .tw li img {
    width:50px;
    height:29px;
    border:1px solid #999999;
    float:left;
    margin:3px;
    margin-right:5px;
    }
    .tw li {
    padding:3px;
    font-size:12px;
    list-style:none;
    border-bottom:1px solid #F1F7F9;
    }
    .tw li.on {
    padding:3px;
    font-size:12px;
    list-style:none;
    border-bottom:1px solid #F1F7F9;
    background-color:#F7F7F7;
    }
    .tw li dt {
    padding:1px;
    font-weight:bold;
    }
    .tw li dt.on {
    padding:1px;
    font-weight:bold;
    color:#FF0000
    }
    .tw li dd {
    padding:1px;
    color:#999999;
    }
    .tw li dl {
    padding-top:3px;
    padding-bottom:3px;
    }
    *.tw li dl {
    padding-top:3px;
    padding-bottom:3px;
    margin:2px 0px;
    }
    *+html .tw li {
    zoom:1;
    }
    </style>
    </head>
    <body>
    <div>
      <ul id='tw' class="tw">
        <li style="border-top:1px solid #F7F7F7" mce_style="border-top:1px solid #999999"> <img src="http://img.kankan.xunlei.com/img//pic/1980.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1980.jpg" >
          <dl>
            <dt>《红河》金像奖新科影帝张家辉力作</dt>
            <dd>张家辉张静初挑战激情戏上演禁忌爱情</dd>
          </dl>
        </li>
        <li> <img src="http://img.kankan.xunlei.com/img//pic/1961.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1961.jpg" >
          <dl>
            <dt>《秘密列车》高智商谍战惊悚悬疑剧</dt>
            <dd>计中计案中案，剧情环环相扣引人入胜</dd>
          </dl>
        </li>
        <li> <img src="http://img.kankan.xunlei.com/img//pic/1974.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1974.jpg" >
          <dl>
            <dt>《星际迷航》经典科幻史诗再度归来</dt>
            <dd>北美票房冠军，比《金刚狼》更受欢迎</dd>
          </dl>
        </li>
        <li> <img src="http://img.kankan.xunlei.com/img//pic/1977.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1977.jpg" >
          <dl>
            <dt>《渴望》中国电视剧发展史的里程碑</dt>
            <dd>犯罪率骤降，据说小偷都跑去看该剧了</dd>
          </dl>
        </li>
      </ul>
    </div>
    <script>
    function $(Id){return document.getElementById(Id);};
     var forEach = function(array, callback, thisObject){
       for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
     }
     var lis = $('tw').getElementsByTagName('li')
     forEach(lis,function(o, i){
      o.onmouseover = function(){ o.className = "on";o.getElementsByTagName('dt')[0].className = "on"}
      o.onmouseout = function(){  o.className = "";o.getElementsByTagName('dt')[0].className = ""}
     })
    </script>
    </body>
    </html>
      

  7.   


       <li style="border-top:1px solid #F7F7F7" mce_style="border-top:1px solid #999999">
          <img style="margin-top:15px;" src="http://img.kankan.xunlei.com/img//pic/1980.jpg" mce_src="http://img.kankan.xunlei.com/img//pic/1980.jpg" >
                 <dt>《红河》金像奖新科影帝张家辉力作</dt>
                 <dd>张家辉张静初挑战激情戏上演禁忌爱情</dd>
       </li>