P:浏览器IE对空白字符的处理

WPF中，对需要保留空白的元素可指定属性：[xml:space="preserve"] .. 看到这里时，想起在测试Web系统时遇到的小bug。

someday有个同事提交测试结果：很多功能根本就不能用，要么点击无效，要么请求失败，各种各种。我的心里咯噔一下，这个系统已经开发了一年，而且很多客户都在用，难道都要返厂升级？（这次可是老板亲自把关，让我的老脸往哪儿搁？忐忑不安中~~）

然后就针对他反映的bug,一个一个重新测试，奇怪的是都未重现，我用的是IE8做测试，所以一直相安无事。后让他用IE浏览器的兼容模式（原IE11）去测试，bug消失了。还与高版本的浏览器不兼容？ 调试之后才知道，是代码写的不严谨，直接用标签的内容与指定文本比较：

$(selector).html() == "something "

为了结构清晰，代码大都采用了缩进的方式，而不同浏览器对缩进，即空白和换行的处理方式是不同的！

IE8-， 在创建DOM树时，会忽略这些空白字符；

IE9+、FireFox、Chrome等浏览器，会把空白字符或换行作为文本节点来处理。

测试示例：

  标签下若直接是文本信息，Dom 会直接将空文本节点和实际的文本生成一个节点，效果不是很明显。
  故将文本包含在i标签内。遍历父容器（div）的所有子节点（childNodes）。
  (还原文本： ?代表回车；+代表空格)

<div id="divTest"><i>Hello</i></div>

获取子节点信息：

//子节点信息模板var tdTmpl = "<tr><td>{0}</td><td>{1}({4})</td><td> {2}</td><td>{3}</td></tr>"//节点类型说明var arrNodeType = ["", "Element", "Attribute", "Text"];var subNodes = document.getElementById('divTest').childNodes;var v_msg = [];for(var i = 0, len = subNodes.length; i < len; i++){var curNode = subNodes[i],ntype = curNode.nodeType,nvalue = ntype == 3 ? curNode.data : curNode.innerHTML,nvalue_rp = ShowWitheSpace(nvalue);v_msg.push(tdTmpl.format(i+1, ntype, nvalue, nvalue_rp, arrNodeType[ntype]));}$("#tblNodeData tbody").html(v_msg.join(""));

IE10 下的空白字符处理：

IE7(兼容模式)的空白字符处理：

参考资料：

http://www.w3school.com.cn/xmldom/dom_mozilla_vs_ie.asp

http://w3help.org/zh-cn/causes/SD9003

http://segmentfault.com/q/1010000000398015

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM