dom属性 contenteditable=”true” 容器里的一些表现特性心得

发现blog都快长毛了~ ，最近几个月文章产出少，都在折腾杂碎。
不过还是有点心得 想记录下来。 比如：编辑器模式 contenteditable=”true”
因为组件主要，接触了个把月的 编辑器模式，接触到了很多跟编辑器模式 相关的特性。

稍微整理一下甩出来 晒晒，说错了别抽我，一知半解，还有一堆问题。 ^__^

1.如何支持成块编辑 inline-block

有一种场景，如添加某 标签词tag 后，如果想删除这个tag，如果不做什么，会发现会一个字一个字删去。
解决办法：
IE下只要给tag 套上 某标签(一般是span class=tag) 然后 将 tag class 定义为inline-block 就能实现整块 删除的效果。不过会有

chrome 下需要给tag 节点添加 contenteditable=”false” 属性来阻止内部可编辑就可以。
firefox 比较蛋疼 发现firefox下inline-block 或者 contenteditable=”false” 都能实现 整块删除，
除了一个标签就是 img标签，不要给img标签添加 src 属性，只添加title属性可以实现上述功能。

另外，在IE下会有下图的可编辑态，

这个真心不知道怎么去掉，谁知道怎么去~~~~掉？

2.空格回车慎重添加，末尾须加空格

IE下，如果空格太多在编辑删除字符的时候，会有抖动现象。就是最好contenteditable=”true” 节点内的东西都挤一块，别为了美观手贱加空格回车神嘛的。
另外，如果最后一个节点是 inline-block 块状的话，最好在后面添加一个空格，使光标能够正确获取。

3.高度自适应

除IE6 残了外，其他浏览器都能通过 回车实现高度增长。
值得注意的是，如果同级有绝对定位，并且是bottom 定位的dom 如：剩余字数。这个时候IE浏览器会有兼容性问题，可以通过其他方式实现，比如：负margin来实现。

4.position:xx 慎用

在IE下会引起 reflow bug 云云~ >.<

今天就到这了，陆续更新..