-2

下面的 HTML 代码在 IE 8 中运行良好，但在 FF 11 中却不行。虽然代码似乎考虑了不同的浏览器，但出于某种原因，FF 并没有做到这一点。有人可以告诉我如何让它在 IE 和 FF 中工作吗？这个想法是旋转几个可点击的图片。

<html>
<head>
</head>
<body>
<ilayer id='l1'>
<layer id='l2'>
    <div id='l1'>
        <div id='l3' style='position:relative'>
        </div>
    </div>
</layer>
</ilayer>
<script language='JavaScript'>
<!--

var bannerArray = new Array();
var myCount=0;
// Banner Code Assignment
bannerArray[0] = "<a href='http://www.google.com' target='_blank'><img src='image1.jpg' BORDER=0 height='50'/></a>";
bannerArray[1] = "<a href='http://www.google.com' target='_blank'><img src='image2.jpg' BORDER=0 height='50'/></a>";
bannerArray[2] = "<a href='http://www.google.com' target='_blank'><img src='image3.jpg'     BORDER=0 height='50'/></a>";

bannerRotate();

function bannerRotate() {

if(myCount > bannerArray.length-1){myCount=0;}

// Write out rotation

if (document.all){          // it is IE
    document.all.l3.innerHTML=bannerArray[myCount];
}

else if (document.layers){  // it is NN

document.layers.l1.document.layers.l2.document.open();
document.layers.l1.document.layers.l2.document.write(bannerArray[myCount]);
document.layers.l1.document.layers.l2.document.close();
}
setTimeout('bannerRotate()', 1000);
myCount++;
}
// -->
</script>
</body>
</html>
4

4 回答 4

2

您尚未指定 DOCTYPE。

这是 HTML 文档的重要组成部分。没有它，IE 会将 HTML 视为无效并以 Quirks 模式呈现。其他浏览器不会。

当我处于 Quirks 模式时，它基本上像在 IE5 中那样呈现页面。

这就是为什么您在 IE 和 FF 中看到页面看起来不同的原因。Firefox 实际上正在正确呈现它；这是错误的IE。

添加有效的 DOCTYPE 以使 IE 正确呈现它。如果您不知道要使用哪种 doctype，请使用以下一种：

<!DOCTYPE html>

这将使页面在所有浏览器中呈现相同。

但是，IE 会发生变化，因此如果您认为它现在在 IE 中呈现良好，那么您可能必须对布局进行一些更改才能修复它。

希望有帮助。

此外，您的 Javascript 代码非常过时。您将需要考虑从头开始重写所有这些。没有人使用document.all或document.layers不再使用。但是，文档类型是导致您的页面在第一个实例中呈现不正确的主要因素。

于 2013-06-04T06:47:32.707 回答
1

只需替换if (document.all)为if (document)，它将在 Firefox 中运行。

它会，但不是真的，不要那样做！这是基于一些全能的黑客。

无论您从哪里获得该代码，现在就停止使用它。

网上有很多教程可以向您展示如何以现代方式旋转图像的显示。去找一个。

于 2013-06-04T07:07:18.333 回答
1

document.all并且document.layers是专有的和过时的。改为使用document.getElementById()。

于 2013-06-04T06:39:02.240 回答
0

让我们把这段代码带入 21 世纪，不要忘记 docype！！！！

HTML

<ul id="banner">
    <li id="bannerItem1"><a href="http://www.google.com.au"><img src="http://placehold.it/450x150/FF0000/FFFFFF/&text=Image1" /></a></li>
    <li id="bannerItem2"><a href="http:/jquery.com"><img src="http://placehold.it/450x150/00FF00/FFFFFF&text=Image2" /></a></li>
    <li id="bannerItem3"><a href="http://www.google.com.au"><img src="http://placehold.it/450x150/0000FF/FFFFFF&text=Image3" /></a></li>

</ul>

CSS

#banner 
{
    list-style:none; /*Turn Off List Styling */
}

#banner li
{
display:none; /*Hide the List Items*/
}

#banner li#bannerItem1
{
    display:block;/*Show The First One */
}

Javascript

var listItems = document.getElementById("banner").getElementsByTagName("li");
var limiter = 0;//this is to stop it infinatly looping...optional
var activeNode = 0;

var t = setInterval(function(){bannerRotate()},1000);
function bannerRotate() {

    var listItemsCount = listItems.length;
    //LOOP THROUGH  List Items
    for(i = 0; i < listItemsCount; i++)
    {
        //Turn off all but next active node
        if(i != activeNode +1)
       {
              listItems[i].style.display = "none";
       }
        //Check if next active node is outside the list range
      else if((activeNode + 1) < listItemsCount)
      {
           listItems[activeNode +1].style.display = "block"
      }
    }

    activeNode++;
    if(activeNode >= listItemsCount)
    {
        listItems[0].style.display = "block";
        activeNode = 0;
    }

    if(limiter++ > 4)
    {    
       clearInterval(t);
    }
}

示例：http: //jsfiddle.net/Hj78T/

于 2013-06-04T13:30:23.987 回答