下面的HTML代碼適用於IE 8，但不適用於FF 11.任何人都可以告訴我如何在IE和FF中使用它？

-2

下面的HTML代碼在IE 8中工作正常，但在FF 11中沒有。儘管代碼似乎考慮了不同的瀏覽器，但由於某些原因，FF並沒有這樣做。有人可以告訴我如何讓這個工作在IE和FF？這個想法是旋轉幾個可點擊的圖片。下面的HTML代碼適用於IE 8，但不適用於FF 11.任何人都可以告訴我如何在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>

來源

2013-06-04 Marten

在標題，你應該給至少一個提示你正在嘗試去做。你還應該更好地描述你想要做什麼，以及它究竟是如何「不起作用」。 –

這段HTML和JavaScript似乎很古老，我懷疑它可以在任何現代瀏覽器中使用。你最好重寫整個代碼。 – Teemu

doctype，doctype，doctype。 – Spudley

document.all和document.layers是專有的和過時的。改爲使用document.getElementById()。

來源

2013-06-04 06:39:02

糾正我，如果我錯了，但不應該它的工作呢？ if（document.all）語句只在IE中使用時返回true，否則應該轉到else if。 – Marten

@Marten，對，但document.layers不會被任何現代瀏覽器匹配。 – Alohci

您還沒有指定DOCTYPE。

這是HTML文檔的重要部分。沒有它，IE會將HTML視爲無效，並將其呈現爲怪癖模式。其他瀏覽器不會。

當我處於怪癖模式時，它基本上像在IE5中那樣渲染頁面。

這就是爲什麼你看到在IE瀏覽器與FF頁面看起來不同的原因。 Firefox實際上正在渲染它;這是IE錯誤。

添加一個有效的DOCTYPE，使IE正確呈現。如果你不知道用哪個文檔類型，使用這一個：

<!DOCTYPE html>

這將會使頁面呈現在所有瀏覽器相同。但是，它會改變IE瀏覽器，所以如果你認爲它現在在IE中渲染得很好，那麼你可能需要對你的佈局做一些修改來修復它。

希望有所幫助。

此外，您的Javascript代碼已經非常糟糕。你需要考慮從頭開始重寫所有這些。沒有人再使用document.all或document.layers。但是，文檔類型是讓頁面在第一個實例中錯誤渲染的主要原因。

來源

2013-06-04 06:47:32 Spudley

我認爲當這段代碼最初寫入時，「DOCTYPE」甚至還沒有出現。此外'層'或'ilayer'標籤不能在任何文檔中找到，他們只是那麼古老... – Teemu

我很驚訝我在這麼短的時間內得到的答案！恭喜所有人，並感謝您向正確的方向暗示我。我在互聯網上的某個地方找到了codesnippet，並想到在我的項目中使用它。作爲一個全新的（但願意學習），我試着在這裏發佈我的問題，因爲我發現它在FF中不起作用。瞧！幾乎10分鐘後，我有事情的工作！魔法。感謝大家。 – Marten

@Marten你應該給這些傢伙一些投票，並接受答案，如果你解決了你的問題thx他們:) –

只需將if (document.all)替換爲if (document)，它就可以在Firefox中使用。

它會，但沒有真的，不這樣做！這是基於一些全能的黑客。

哪裏有你得到的代碼，立即停止使用它。

網上有大量的教程，將告訴你如何以現代的方式旋轉圖像的顯示。去找一個。

來源

2013-06-04 07:07:18 Alohci

讓我們把這段代碼帶入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-04 13:30:23

下面的HTML代碼適用於IE 8，但不適用於FF 11.任何人都可以告訴我如何在IE和FF中使用它？

回答

相關問題