开发编辑器的过程中遇到的一些浏览器差异
Tags: javascript
测试新编辑器时发现在firefox下会有很高几率出现一个神奇的bug。
当光标在block元素(blockquote, pre, etc..)中时,按‘下’或‘右’或‘回车’键后,光标会选中block元素中第一段文本。刚开始怀疑是在FF下rangy设置selection的bug,但在注释所有js中keydown的处理事件后,还是会有此bug。
之后百思不得其解,甚至想到用scribe重写编辑器…
在观察scribe的demo在FF下的表现后,终于找出了这个很愚蠢的bug…
在blockquote中我特地的把p标签转换成text + <br>
,但实际上在html4中是要求blockquote等块状元素中需要存在p标签(这是来自stackoverflow的一个回答,我没有看html4标准..),所以我特地的去除p标签反而是画蛇添足之举。
在chrome, IE等浏览器下对于<blockquote>test<br></blockquote>
这种html没有特殊限制,浏览器的默认行为完全可以正常工作。
但是在firefox下,当光标在test
文本末端时,按下回车,本应换行,但是firefox会去寻找当前的p标签(这是html4规范,Firefox依赖了此规范,chrome等则没有),但是我错误的没有把文本放入p标签,所以造成浏览器默认行为出现bug。
正确的标签应该是<blockquote><p>test<br></p></blockquote>
这样才符合html规范。
在开发编辑器的过程中,接触到了很多这种浏览器默认行为不一致的问题。
比如firefox下偶尔会对br标签加上type="_moz"
的属性。
chrome和safari下拖拽block中元素浏览器会把拖拽的文本放入span并且自动添加很多style属性。
在webkit内核浏览器中block元素里按回车会在下一行自动添加同样的block元素,在FF中则是自动换行。
如果一行中有br,在IE下光标在br之后,其余的浏览器则是在br之前(偶然通过range对象观测到的,在block末尾时IE中的endoffset会多1)
浏览器的很多上层API加上跨平台库已经让人很少能感受到js编程的平台差异,但是在contenteditable中诸如此类html中并无规定的默认行为在不同浏览器上的表现却是千差万别。尤其是号称跨平台的selection库rangy实际上在不同平台上还是会有很多bug与不一致,举例来说最基本的获取range对象,在webkit浏览器上取得range,start和end会优先是textElement,但是在FF上则会得到ElementNode。
html规范毕竟不可能涵盖所有情况,各种标签的嵌套以及不同情况下用户的操作,这些规范之外的情况只能靠具体的实现来决定行为。
就像各种的markdown解析器,在规定之下会输出相同的结果,但若在规定之外,每个parser都会有些许的差别。
看来浏览器距离完美的平台还有不短的距离..