近期处理一个项目，需要“翻译”页面的注释节点。功能在Firefox下一切正常，项目进行非常顺利。拿到IE全系列下，却非常不正常，把注释翻译成ELEMENT Node，页面立刻飞掉。检查不出来原因，抓狂了好几天。
后来发现，问题出在IE渲染li的时候。我们的项目里，有时候要求注释节点需要插入在li的后面。虽然这不太标准，但是实际应用中，也是没办法的事。IE6+会把注释节点包进li里面，真是无语。
例如页面上的代码：
<ul id=”test”>
<!– comment_begin –>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<!– comment_end –>
</ul>
试试document.getElementById(“test”).innerHTML，弹出：
<!– comment_begin –>
<LI>asdf
<LI>asdf
<LI>asdf <!– comment_end –></LI>

最近从头开发了一个简单实用的页面可视化编辑器，感觉从中学到了不少东西。功能就是用一个脚本把前端页面的某些块搞成可以编辑的状态。遇到了几个主要的问题，让我印象最深刻。汇总一下吧：
Firefox 3+开始支持contenteditable属性，这让可视化编辑变得简单。想要“可视化”一个节点，只要给它赋上contenteditable属性即可。如果你想让某一个页面上实现简易的在线编辑功能，那么思路就是：
1. 前端页面，通过JavaScript给需要编辑的节点赋上contenteditable属性，为true。注意这里要用o.contentEditable = “true”，用setAttribute在IE下设置不成功。
2. 用js生成一个按钮工具条，包括一些常用的按钮，例如加粗、修改链接等等。用document.execCommand来执行一些常用的命令，但可用的不多，只有createlink, unlink, bold等。需要的话，还是自己写。
3. 需要弹出对话框的指令，例如修改链接，用行内对话框（inline popup）来实现，不用window.open。一来比较方便，二来可以避免某些浏览器把弹窗block掉。