2011-06-08 40 views
3

我正在創建一個網頁,我希望用一個新的<span>元素替換<span>元素。原始<span>元件是(例如):Chrome和IE8 vs其他

<span class="green_link">;Abbreviation;The definition</span> 

提供的字符串的形式是<separator><string><separator><string>。提供分隔符是爲了確保第一個或第二個字符串中的任何特殊字符不會導致解析困難。

一個JavaScript函數由onload事件處理函數調用<body>元素。它檢測到所有類型爲「green_link」的<span>。如果不存在這樣的<span>,則該函數退出。否則,對於每個這樣的<span>,該函數創建一個新<span>元素:

<span class='revised_green_link'> 
    <span class='abbreviation_alone'> 
     Abbreviation 
    </span> 
    <span class='abbreviation_definition'> 
     <a id='greenlink_1'></a> 
     <a href='#greenlink_1' 
     style='text-decoration:none; 
       font-weight:bold;'> 
     <span class='abbreviation'> 
      Abbreviation 
     </span> 
     <span class='definition'> 
      The definition 
     </span> 
     </a> 
    </span> 
    </span> 

然後函數替換「green_link」 <span>與新創建的「revised_green_link」 <span>

使用test pageactual page測試瀏覽器。 Firefox 3.6.12,Opera 11.11和Safari 5.0.2顯示了這兩個頁面的預期結果。 Chrome 12.0.742按預期顯示測試頁,但未能按預期顯示實際頁面。 IE 8無法按預期顯示任一頁面。

我發現有趣的是,一旦Visual Studio 2008使用「在瀏覽器中查看」(即http://localhost:1291/BIODAB.html)顯示頁面,所有瀏覽器都會按照預期在localhost:port上定位網頁。

這兩個HTML文檔都被W3C標記驗證服務成功檢查爲XHTML 1.0 Strict。所有的CSS(包括測試和實際)都在W3C CSS驗證服務的CSS級別2.1上成功驗證。除jQuery JavaScript庫v1.4之外的所有JavaScript都通過JSLint傳遞,沒有錯誤。

我不知道什麼是造成這種不同的行爲,並會感謝一些想法。

回答

0

在IE8中,有兩部分失敗。

首先是HTTP標頭包括這一行:

x-ua-compatible: IE=EmulateIE7 

其把瀏覽器到IE7模式。

第二部分是,GreenLinkTest.js包含

getAttribute("class") 

不IE7中工作。有關更多詳細信息,請參閱getAttribute cannot return class in IE7?

我看不到Chrome的問題。

+0

謝謝,你打了。我經歷了所有的代碼,並按照您的建議替換了getAttribute語句。像魅力一樣工作。 – Gus 2011-06-13 15:03:27

3

您可以用JavaScript創建HTML標籤,它是跨瀏覽器:

var newSpan = document.createElement('SPAN'); 
newSpan.id = 'newSpanId'; 

,然後將其追加到所需的容器(DIV,A,等...)

parentContainer.appendChild(newSpan); 

刪除元素:

parentContainer.removeChild(document.getElementById('elementId')); 
+0

對不起,我沒有包括HTML,Javascript或CSS的機器人 - 這一切都有點兒。新的紐結如示例中生成,舊的替換爲green_link.parentNode.replaceChild(revised_green_link,green_link);如果您需要綠色鏈接代碼的內容,我可以將它們發送給您。 – Gus 2011-06-08 19:13:26