IE6 和 IE7 弄乱了 JavaScript 生成的动态 HTML答案

【问题标题】：IE6 & IE7 messing up dynamic HTML generated by JavaScriptIE6 和 IE7 弄乱了 JavaScript 生成的动态 HTML
【发布时间】：2010-11-22 18:27:36
【问题描述】：

我想知道我的 IE6 和 IE7 是否弄乱了由 JavaScript 生成的动态 HTML（与 FancyBox 和 jQuery 一起使用）。

例如：

var html = '<a href="#fancyBoxContent" class="fancybox"></a>';
document.getElementById('container').innerHTML = html;

不是用“<a href="#fancyBoxContent" class="fancybox"></a>”填充容器，而是变成“<a href="http://website.com/#fancyBoxContent" class="fancybox"></a>”。

任何类型的 HTML/CSS 都是有效的，但 IE6 和 IE7 认为“奇怪”会一团糟。我可以使用 DOM 元素创建 HTML，但是虽然这个例子很简单，但这意味着我更复杂的代码将导致 javascript 复杂和冗长许多倍。此外，交叉兼容成为一个问题，并且并不总是能够控制正在生成的 HTML 代码的确切语法。因此，为什么我以这种方式使用 javascript 创建动态 HTML，DOM 元素和构建器破坏了我尝试生成的许多有效 HTML/CSS。

有什么办法解决这个问题？

【问题讨论】：

标签： javascript html internet-explorer-7 internet-explorer-6

【解决方案1】：

我无法意识到这个特定问题。不过，它不应该引起任何问题。在行为方面，http://website.com/foo#fancyBoxContent 和 #fancyBoxContent 是相同的，因为当前页面的 URL 是 http://website.com/foo。

【讨论】：

确实如此，我将它与 FancyBox + jQuery 一起使用，其中 href 参数是指将显示的元素的 ID。因此 #fancyBoxContent =
website.com/foo#fancyBoxContent 把这一切搞砸了。如前所述，我需要准确呈现 HTML。另外，如上所述，这是一个简单的示例，忽略问题并不能解决问题。
那是 FancyBox 中的一个错误。也许您可以使用不同的属性，即“data-fancybox-href”。 IE 只是以这种方式改变了<a> 标签上的 href 属性。
ok...第三次了，这是一个简单的例子，当你尝试通过innerHTML将'style'标签写入页面时会发生什么？ IE6什么都不写。基本上，如何阻止 IE6 通过 innerHTML 将字符串设置为元素。使用不同的属性也不起作用，因为 IE6 不认为它们是“有效的”，因此被删除了。
有很多很多例子不涉及fancybox的jquery，这是一个更广泛的问题，即通过innerHTML设置时字符串被弄乱了
我很确定 IE 会改变锚属性，无论是在页面加载时插入 DOM API、innerHTML 还是 HTML 本身。