Range在各浏览器下的问题和常见处理办法
第一次听到Range这个概念是在空间编辑器的技术交流会上，当时作者给我们提到编辑器中最重要的概念就是Range，通过操作range，就可以实现编辑器的所有操作。到底具体什么是range呢，其实 简单点就是选区，大家对矩形可能有概念，其实range可以理解为矩形 ，只要我们选定了一个文本，那么这个文本就占有空间了，所以range是有起始和结束位置的。
一、关于浏览器的兼容性
目前主要有3种关于range的类似的对象，分别是W3C range 对象，Mozzlia selection ，ie TextRange
关于这三种的区别，请查看文档 http://www.quirksmode.org/dom/w3c_range.html 这里面对这三个是说的很清楚的
可以看出 Mozilla 的 range 是一个selection对象 ，而在ie下 range 是一个 text Range 这个和Mozilla是完全不同的，所以需要为这两种类型的range
分别写不同的兼容性的脚本，目前主流浏览器 Mozilla,chrome safari,opera 都支持 selection 对象，但是opera 也支持 IE 下text Range ，但是不全面。
所以代码应该这样
var selection; //申明range 对象
if (window.getSelection) {
// 主流的浏览器，包括mozilla，chrome，safari
selection = window.getSelection();
} else if (document.selection) {
selection = document.selection.createRange();//IE浏览器下的处理，如果要获取内容，需要在selection 对象上加上text 属性
}
其实判断浏览器的兼容性，我们还可以这么判断
if (Obj.createTextRange) {
//IE浏览器下的操作
} else if (Obj.setSelectionRange) {
//非IE 下的一些操作
}
我跟踪了下载chrome 和IE下的这些对象，上图给大家看一下
在ie下，如果创建了range对象，那么就有
range.moveEnd()
range.moveStart()
range.select();
可以实现选定文本的操作
在其他浏览器下，可以通过obj.setSelectionRange() 来实现选定操作，具体格式如下
o.setSelectionRange(start,end);
o：为文本输入框对象
start：为字符串的起始位置
end：为字符串的末位置
在鼠标的位置处，实现文本的插入操作，在ie下
可以通过document.selection.createRange().text = value;
其中 document.selection.createRange() 表示当前鼠标的位置的TextRange 对象， textRange.text = value表示在当前鼠标处插入值
在其他浏览器下中可以通过 obj.value = str +value +str1 的形式
在非ie下 对于文本框这种输入的obj,是有 selectionStart，selectionEnd属性的，表示当前鼠标的位置。
总结:
1）提到了range对象不在同浏览器下创建，获取文本的内容以及兼容性的问题
2）如何通过range对象，实现文本框中的文本插入操作
3）如何通过range对象，实现文本的选定以及光标移动操作
欢迎大家拍砖。。
在html4中type 被 list-style-type给替代了，start 和value几乎不常用，很少看到有这样的代码，但是html5的新标准这几个属性又重新被捡回来了。
1）个人感觉使用type 属性 list-style-type 简单，也容易记忆
下面来对应下这两个之间的关系
type list-style-type type = "1" decimal (默认样式) type = "a" lower - alpha type = "A" upper - alpha type = "i" lower - roman type = "I" upper - roman
如果两个属性同时存在的话，那么list-style-type 的优先级高
2）start与 value，就是开始的vendor，请看如下代码：
< ol type ="I" >
< li value ="5" > aaaaaaaaaaaaaaaaaaaaa </ li >
< li > bbbbbbbbbbbbbbbbbbbbbb </ li >
< li > cccccccccccccccccc </ li >
< li > ddddddddddddddddddddd </ li >
< li > eeeeeeeeeeeeeeeeeeeeee </ li >
</ ol >
等同于
< ol type ="I" start ="5" >
< li > aaaaaaaaaaaaaaaaaaaaa </ li >
< li > bbbbbbbbbbbbbbbbbbbbbb </ li >
< li > cccccccccccccccccc </ li >
< li > ddddddddddddddddddddd </ li >
< li > eeeeeeeeeeeeeeeeeeeeee </ li >
</ ol >
他们表示的意思都是一样的，效果相同
3）兼容性：
type ，start，value 对于ie6,7,8，chrome17，firefox10 下测试都是支持的。
html5 有序列表ol的一些变化
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于Range在各浏览器下的问题和常见处理办法的详细内容...