Chrome和IE8与其他浏览器的区别

Question

我正在创建一个网页，在其中我希望用一个新的<span>元素替换原有的<span>元素。原始的<span>元素（例如）是：

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

提供的字符串的形式为<分隔符><字符串1><分隔符><字符串2>。提供分隔符是为了确保第一个或第二个字符串中的任何特殊字符不会导致解析问题。

一个JavaScript函数通过元素的onload事件处理程序调用。它检测所有class为“green_link”的元素。如果不存在这样的，函数将退出。否则，对于每个这样的，函数都会创建一个新的元素：

  <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>

然后函数用新创建的"revised_green_link"<span>替换"green_link"<span>。浏览器使用测试页面和实际页面进行测试。Firefox 3.6.12、Opera 11.11和Safari 5.0.2在两个页面上都显示了预期结果。Chrome 12.0.742在测试页面上显示了预期结果，但未能如预期般显示实际页面。IE 8未能如预期般显示任一页面。有趣的是，所有浏览器在通过localhost:port访问网页时，当Visual Studio 2008使用"View in browser"（即http://localhost:1291/BIODAB.html）显示页面时，它们都按预期显示网页。

两个HTML文档都通过W3C标记验证服务成功地检查为XHTML 1.0严格版。所有CSS（包括测试和实际）都通过W3C CSS验证服务成功地验证为CSS Level 2.1。除了jQuery JavaScript Library v1.4以外，所有JavaScript都经过JSLint的检查而没有错误。

我不知道是什么原因导致这种多样化的行为，希望得到一些想法。

- Gus

Answer 1

您可以使用JavaScript创建HTML标签，而且它是跨浏览器的：

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

然后将其附加到所需的容器中（div、a等）。

parentContainer.appendChild(newSpan);

删除一个元素：

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

- mrsmith

---

抱歉我没有包含HTML、Javascript或CSS - 这些都有点复杂。新的链接生成方式如示例所示，旧的链接则被绿色链接的父节点替换为 revised_green_link, green_link。如果您需要绿色链接代码的内容，我可以将它们发送给您。 - Gus

Answer 2

在IE8中，故障有两个部分。

第一个是HTTP头包含这一行：

 x-ua-compatible: IE=EmulateIE7

这是将浏览器置于IE7模式的方法。

第二部分是GreenLinkTest.js包含

getAttribute("class") 

在IE7中无法正常工作。有关详细信息，请参见getAttribute不能返回类？。

我在Chrome中看不到问题。

- Alohci

---

谢谢，你说得对。我检查了所有的代码，并按照你的建议替换了getAttribute语句。效果非常好。 - Gus