Internet Explorer Javascript Image問題

我跟着Jeremy Keith的書「DOM Scripting」，我試圖讓一個小圖片庫在Internet Explorer 6/7中正確呈現，我碰到了一堵牆。Internet Explorer Javascript Image問題

我有4個縮略圖使用下面的代碼點擊時負載的佔位符：

function showPic(whichpic) { 
    if (!document.getElementById("placeholder")) return true; 
    var source = whichpic.getAttribute("href"); 
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 
    if (!document.getElementById("description")) return false; 
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; 
    var description = document.getElementById("description"); 
    if (description.firstChild.nodeType == 3) { 
     description.firstChild.nodeValue = text; 
    } 
    return false; 
}

我的佔位符插入使用createElement("img")的頁面，但是當我點擊縮略圖圖像壓縮規模它替換的佔位符。

function preparePlaceholder() { 
    if(!document.createElement) return false; 
    if(!document.createTextNode) return false; 
    if(!document.getElementById) return false; 
    if(!document.getElementById("imagegallery")) return false; 
    var placeholder = document.createElement("img"); 
    placeholder.setAttribute("id","placeholder"); 
    placeholder.setAttribute("src","images/placeholder.gif"); 
    placeholder.setAttribute("alt","Gallery Placeholder"); 
    var description = document.createElement("p"); 
    description.setAttribute("id","description"); 
    var desctext = document.createTextNode("Choose an image"); 
    description.appendChild(desctext); 
    var gallery = document.getElementById("imagegallery"); 
    insertAfter(placeholder,gallery); 
    insertAfter(description,placeholder); 
}

因此，如下圖所示的結果是扭曲的圖像：

In Chrome In Explorer

直播網站在這裏：http://anarchist.webuda.com/

的Javascript這裏：http://pastebin.com/kaAhjdqk HTML瀏覽：這裏http://pastebin.com/Dm5p2Dj6 CSS ：http://pastebin.com/yiVPiQZe

來源

2010-07-29 Ash

怎麼樣的CSS？ – 2010-07-29 06:25:00

加入：http://pastebin.com/yiVPiQZe – Ash 2010-07-29 06:27:59

嘗試增加了功能在接下來的2行之後placeholder.setAttribute("src",source);

placeholder.removeAttribute('width'); 
placeholder.removeAttribute('height');

使用IE8開發工具（兼容模式），我可以重現該問題，並發現width和height被自動分配。所以我用調試器使用removeAttribute進行了測試，並且圖像增長到了適當的大小。但我真的不知道這些線路的位置是否正確，請告訴我。

來源

2010-07-29 23:17:20

修正了它。謝謝！ – Ash 2010-07-30 00:48:23

Internet Explorer Javascript Image問題

回答

相關問題