在过去，为了在浏览器中获得一致的选择位置，我使用插入 span 元素并从该元素读取数据的方法... 这有点 hacky，但似乎更可靠。
通过这种方式，您应该完全避免特定的 bug... 我不知道这是否被视为明智的做法 ;) 不过它已经在所有这些用户代理上进行过测试并且工作正常：
- Mac OSX FF15/FF16
- Mac OSX Safari 5.1.7
- Mac OSX Chrome 22
- Mac OSX Opera 12
- Win XP FF 3.6
- Win XP Safari 3.1
- Win XP IE7/IE8
- Win 7 IE9
- Win 7 FF15
- Win 7 Chrome 22
（以下代码依赖于 jQuery，最好是 1.8+）
jsfiddle：
http://jsfiddle.net/vCWha/
css：
#__span__ {
display: inline !important;
*display: inline-block !important;
}
.crosshair-v {
height: 0;
width: 20px;
border-bottom: 1px solid red;
position: absolute;
margin-left: -10px;
}
.crosshair-h {
height: 20px;
width: 0;
border-right: 1px solid red;
position: absolute;
margin-top: -9px;
}
javascript
(function($){
$(function(){
var span = $('<span id="__span__" />').get(0),
crv = $('<div class="crosshair-v" />'),
crh = $('<div class="crosshair-h" />');
$('body').append(crv).append(crh);
var getSelectionTopLeft = function(){
var s,e,a,p,o,r,t;
try{
if ( window.getSelection ){
s = window.getSelection();
r = s.getRangeAt(0);
a = r.startContainer;
p = a.parentNode;
if ( a.nodeType == 3 ){
t = a.splitText(r.startOffset);
p.insertBefore(span, t);
}
else if ( a.nodeType == 1 ){
p.insertBefore(span, a);
}
o = $(span).position();
}
else if ( (s = document.selection) && (s.type != 'Control') ) {
r = s.createRange();
r.move('character',0);
$('#__span__').remove();
r.pasteHTML(span.outerHTML);
o = $('#__span__').position();
}
if ( o && o.left === 0 && o.left === o.top ) {
e = span;
while( e.offsetParent ){
o.left += e.offsetLeft;
o.top += e.offsetTop;
e = e.offsetParent;
}
}
}catch(ex){}
return o;
}
$(document).mouseup(function(e){
var o = getSelectionTopLeft();
if ( o ){
crv.css(o);
crh.css(o);
}
});
});
})(typeof jQuery != 'undefined' && jQuery);
更新
昨晚我有更多时间来改进这个代码，以下是将我的改进代码应用到你的示例中 - 下面的代码应该在各种浏览器中都能正常运行（至少大致如此）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>IE8 IFrame Text Range Position Test Page</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#__span__ {
display: inline !important;
display: inline-block !important;
min-height: 1em;
}
#target {
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
}
#bullsEye {
position: absolute;
background-color: red;
width: 5px;
height: 5px;
}
iframe {
margin: 10px 75px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
(function($){
var bullsEye = $('<div id="bullsEye" />'), span = $('<span id="__span__"></span>').get(0);
/// var is missed here on purpose to make the function globally accessible
target = function() {
moveSelectionToElement( document.getElementById('target') );
bullsEye
.css( getSelectionTopLeft() )
.appendTo('body');
}
/// because selectNodeContents seems to select outside the node we
/// need our own rangeToNodeContents that only highlights text nodes
/// this is a side effect of having code inserted ranges & selections.
var rangeToNodeContents = function(r, node){
var i, l, tns = [];
if ( node.nodeType == 1 && node.childNodes && (l = node.childNodes.length) ){
for ( i=0;i<l;i++ ){
if ( node.childNodes[i] && node.childNodes[i].nodeType == 3 ) {
tns.push(node.childNodes[i]);
}
if ( tns.length > 1 ) {
r.setStart(tns[0],0);
r.setEnd(tns[tns.length-1],tns[tns.length-1].nodeValue.length);
}
else {
r.selectNodeContents(node);
}
}
}
else {
r.selectNodeContents(node);
}
}
/// cross browser selection creator
var moveSelectionToElement = function(elm) {
var s,w,r,d; w = window; d = document;
if (w.getSelection && d.createRange) {
s = w.getSelection();
r = d.createRange();
rangeToNodeContents( r, elm );
s.removeAllRanges();
s.addRange(r);
} else if (d.selection && d.body && d.body.createTextRange) {
r = elm.createTextRange();
r.select();
}
}
/// cross browser getSelectionTopLeft
var getSelectionTopLeft = function(){
var s,e,a,p,o,r,t; o = {left:0,top:0};
try{
if ( window.getSelection ){
s = window.getSelection();
r = s.getRangeAt(0);
a = r.startContainer;
p = a.parentNode;
if ( a.nodeType == 3 ){
t = a.splitText(r.startOffset);
p.insertBefore(span, t);
}
else if ( a.nodeType == 1 ){
p.insertBefore(span, a);
}
o = $(span).offset();
}
else if ( (s = document.selection) && (s.type != 'Control') ) {
r = s.createRange();
r.move('character',0);
$('#__span__').remove();
r.pasteHTML(span.outerHTML);
o = $('#__span__').offset();
}
if ( o && o.left === 0 && o.left === o.top ) {
e = span;
while( e.offsetParent ){
o.left += e.offsetLeft;
o.top += e.offsetTop;
e = e.offsetParent;
}
}
}catch(ex){}
return o;
}
})(typeof jQuery != 'undefined' && jQuery);
</script>
</head>
<body>
<div id="target">Target <b>abc</b> test</div>
<input type="button" value="Hit Target" onmouseup="target();"> <span id="output"></span>
<br><br><br><br><br>
<script>
if (window.parent == window){
document.write('<iframe src="?tfr" height="150" width="500"></iframe>');
}
</script>
</body>
</html>
