innerHTML and text normalization

最新推荐文章于 2025-02-27 15:23:03 发布

原创最新推荐文章于 2025-02-27 15:23:03 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #HTML

web 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了Internet Explorer浏览器对innerHTML属性应用HTML规范化的问题，特别是对于<pre>和<textarea>元素中空白字符的不当处理。提供了一个解决此问题的方法，通过检查outerHTML属性并为<pre>元素设置自定义内容。

[url]http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html[/url]

IE applies HTML normalization to the data that is assigned to the innerHTML property. This causes incorrect display of whitespace in elements that ought to preserve formatting, such as <pre> and <textarea>

Test page. Workaround is not included.

I've found out that setting outerHTML doesn't trigger normalization. So I've decided to test for .outerHTML property and if not false (i.e., IE), prepend and append the opening and closing pre tags to the content I want to set and assign that to outerHTML.

// Workaround for IE <PRE> innerHTML normalization quirk
if (elem.tagName == "PRE" && "outerHTML" in elem)
{
elem.outerHTML = "<PRE>" + str + "</PRE>";
}
else
{
elem.innerHTML = str;
}

(Works with IE & FF)