html,css,js 问题 ie中标题表现不正常，谷歌浏览器正常

Question

一个幻灯，在标题的地方出现问题。谷歌浏览器表现正常。ie10中，第一张图片的标题表现正常，第二个图片的标题往下移一部分，第三个就基本移的显示不出来了。我是菜鸟往大神指导。

下面见代码：（代码我是从网上抄的，修改了一点，望作者谅解啊）

html代码

<div id="box">
    <ul id="pic_list">
        <volist name="slide_fst" id="vo1">
            <li class="show2"><a href="{$vo1.link}" target="_blank"><img width="800" height="400"src="{$vo1.picurl|getpicurl}" alt="{$vo1.title}" /></a></li>
        </volist>
    <volist name="slide_gfst" id="vo">
        <li><a href="{$vo.link}" target="_blank"><img width="800" height="400"src="{$vo.picurl|getpicurl}" alt="{$vo.title}" /></a></li>
    </volist>
</ul>

<div class="mark"></div>

<ul id="text_list">
    <volist name="slide_fst" id="vo1">
        <li><h2 class="show"><a href="{$vo1.picurl}">{$vo1.title|msubstr=0,20}</a></h2></li>
    </volist>
    <volist name="slide_gfst" id="vo">
        <li><h2><a href="{$vo.picurl}">{$vo.title|msubstr=0,20}</a></h2></li>
    </volist>
</ul>

<div id="ico_list">
    <ul>
        <volist name="slide_fst" id="vo1">
        <li class="active"><a href="javascript:void(0)"><img width="64" height="34" src="{$vo1.picurl|getpicurl}" alt="{$vo1.title}" /></a></li>
        </volist>
        <volist name="slide_gfst" id="vo">
        <li><a href="javascript:void(0)"><img width="64" height="34" src="{$vo.picurl|getpicurl}" alt="{$vo.title}" /></a></li>
        </volist>
    </ul>
</div>

<a href="javascript:void(0)" id="btn_prev" class="btn"></a>
<a href="javascript:void(0)" id="btn_next" class="btn showBtn"></a>
</div>

css代码
#box{width:800px;height:400px;position:relative;overflow:hidden;float:left;}
#pic_list{position:relative;z-index:1;}
#pic_list li{position:absolute;left:0;top:0;opacity:0;fliter:alpha(opacity=0);z- index:1;}
#pic_list .show2{position:absolute;left:0;top:0;z-index:2;opacity:1;fliter:alpha(opacity=100);}
.mark{z-index:2;height:60px;width:800px;background:black;position:absolute;left:0;bottom:0;opacity:0.3;filter:alpha(opacity=30);}
#text_list{bottom:60px;left:20px;position:absolute;z-index:5;height:25px;overflow:hidden;border:1px red }
#text_list h2{display:none;}
#text_list .show{display:inline;}
#text_list a{color:#FFFFFF;font-family:"Microsoft YaHei";font-size:16px;font-weight:normal;text-decoration:none;}
#ico_list{position:absolute;bottom:10px;left:12px;width:525px;overflow:hidden;height:46px;z-index:3;}
#ico_list ul{width:1050px;position:absolute;left:0;top:0;}
#ico_list li{width:75px;float:left;}
#ico_list li a{width:68px;padding-top:6px;display:block;}
#ico_list li a img{border:2px solid #DFE8E4;height:36px;width:64px;background:#040303;opacity:0.7;filter:alpha(opacity=70);}
#ico_list .active{background:url(img/a_hover.gif) no-repeat center 0;}
#ico_list .active img{opacity:1;filter:alpha(opacity=100);border:3px solid #fff;height:34px;width:62px;}
.btn{background:url(img/btn.gif) no-repeat;height:38px;width:38px;position:absolute;bottom:11px;opacity:0.5;filter:alpha(opacity=50);cursor:default;z-index:3;}
.showBtn{opacity:1;filter:alpha(opcity=100);cursor:pointer;}
#btn_prev{right:56px;}
#btn_next{right:20px;background-position:right 0;}

js代码

function css(obj, attr, value){
if(arguments.length==2)
{
    if(attr!='opacity')
    {
        return parseInt(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
    }
    else
    {
        return Math.round(100*parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]));
    }
}
else if(arguments.length==3)
    switch(attr)
    {
        case 'width':
        case 'height':
        case 'paddingLeft':
        case 'paddingTop':
        case 'paddingRight':
        case 'paddingBottom':
            value=Math.max(value,0);
        case 'left':
        case 'top':
        case 'marginLeft':
        case 'marginTop':
        case 'marginRight':
        case 'marginBottom':
            obj.style[attr]=value+'px';
            break;
        case 'opacity':
            obj.style.filter="alpha(opacity:"+value+")";
            obj.style.opacity=value/100;
            break;
        default:
            obj.style[attr]=value;
    }

return function (attr_in, value_in){css(obj, attr_in, value_in)};
}

var MIAOV_MOVE_TYPE={
BUFFER: 1,
FLEX: 2

};

function miaovStopMove(obj)

{
clearInterval(obj.timer);
}

function miaovStartMove(obj, oTarget, iType, fnCallBack, fnDuring)

{
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}

switch(iType)
{
    case MIAOV_MOVE_TYPE.BUFFER:
        fnMove=miaovDoMoveBuffer;
        break;
    case MIAOV_MOVE_TYPE.FLEX:
        fnMove=miaovDoMoveFlex;
        break;
}

obj.timer=setInterval(function (){
    fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 30);

}

function miaovDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring)

{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
    cur=css(obj, attr);
    if(oTarget[attr]!=cur)
    {
        bStop=false;

        speed=(oTarget[attr]-cur)/5;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        css(obj, attr, cur+speed);
    }
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
    clearInterval(obj.timer);
    obj.timer=null;

    if(fnCallBack)fnCallBack.call(obj);
}

}

function miaovDoMoveFlex(obj, oTarget, fnCallBack, fnDuring)

{
var bStop=true;
var attr='';
var speed=0;
var cur=0;

for(attr in oTarget)
{
    if(!obj.oSpeed)obj.oSpeed={};
    if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
    cur=css(obj, attr);
    if(Math.abs(oTarget[attr]-cur)>=1 || Math.abs(obj.oSpeed[attr])>=1)
    {
        bStop=false;

        obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
        obj.oSpeed[attr]*=0.7;

        css(obj, attr, cur+obj.oSpeed[attr]);
    }
}

if(fnDuring)fnDuring.call(obj);

if(bStop)
{
    clearInterval(obj.timer);
    obj.timer=null;

    if(fnCallBack)fnCallBack.call(obj);
}

}

window.onload=function(){
var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');
var aTextLi=document.getElementById('text_list').getElementsByTagName('li');
var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');
var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];
var oPrev=document.getElementById('btn_prev');
var oNext=document.getElementById('btn_next');
var oDiv=document.getElementById('box');
var i=0;
var iNowUlLeft=0;
var iNow=0;

oPrev.onclick=function(){
    if(iNowUlLeft>0){
        iNowUlLeft--;
        oUlleft();
    }
    oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
    oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
}

oNext.onclick=function(){
    if(iNowUlLeft<aIcoLi.length-7){
        iNowUlLeft++;
        oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';
    }
    oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
    oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
}

for(i=0;i<aIcoLi.length;i++){
    aIcoLi[i].index=i;
    aIcoLi[i].onclick=function(){
        if(iNow==this.index){
            return false;
        }
        iNow=this.index;
        tab();
    }
}

function tab(){
    for(i=0;i<aIcoLi.length;i++){
        aIcoLi[i].className='';
        //aPicLi[i].style.filter='alpha(opacity:0)';
        //aPicLi[i].style.opacity=0;
        aPicLi[i].className='';
        aTextLi[i].getElementsByTagName('h2')[0].className='';
        miaovStopMove(aPicLi[i]);

    }
    aIcoLi[iNow].className='active';
    //aPicLi[this.index].style.filter='alpha(opacity:100)';
    //aPicLi[this.index].style.opacity=1;

    miaovStartMove(aPicLi[iNow],{opacity:100},MIAOV_MOVE_TYPE.BUFFER);
    aTextLi[iNow].getElementsByTagName('h2')[0].className='show';
    aPicLi[iNow].className='show2';

}

function oUlleft(){
    oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';
}

function autoplay(){
    iNow++;
    if(iNow>=aIcoLi.length){
        iNow=0;
    }
    if(iNow<iNowUlLeft){
        iNowUlLeft=iNow;
    }else if(iNow>=iNowUlLeft+7){
        iNowUlLeft=iNow-6;
    }
    oPrev.className=iNowUlLeft==0?'btn':'btn showBtn';
    oNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';
    oUlleft();
    tab();
}

var time=setInterval(autoplay,2000);
oDiv.onmouseover=function(){
    clearInterval(time);
}
oDiv.onmouseout=function(){
    time=setInterval(autoplay,2000);
}

}

望各位大神指点一二，小弟不胜感激。

Answer 1

该回答引用ChatGPT

这种问题通常是由于不同浏览器对CSS样式的解析不同导致的。在这种情况下，您需要根据问题的性质进行调整，以使其在所有浏览器中都显示正确。

---

具体地，您可以尝试以下方法：

• 确保在所有浏览器中使用相同的文档类型声明和字符编码。可以在HTML文档的头部添加以下代码：

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  ...
  </head>
  <body>
  ...
  </body>
  </html>
  

• 检查CSS样式，确保它们适用于所有浏览器。您可以使用CSS Reset库（如Normalize.css）来帮助规范化CSS样式，以使其在各种浏览器中显示一致。

• 确保使用CSS属性和值符合CSS规范。在CSS中，一些属性和值在不同浏览器中可能会有不同的效果。您可以使用Can I Use网站来查看CSS属性和值的兼容性。

• 对于特定浏览器的问题，您可以使用CSS Hack或条件注释来针对特定浏览器提供不同的CSS样式。

• 检查JavaScript代码，确保它与所有浏览器兼容。您可以使用ESLint等工具来检查和修复您的JavaScript代码中的错误和问题。

总之，调试跨浏览器问题需要一定的经验和技巧。您可以使用一些工具和技术来解决这些问题，如使用开发者工具和浏览器测试工具等。