javascript - Internet Explorer getClientRects 绝对定位元素

Question

我目前在 IE 11 中遇到文本选择问题(尽管在以前的 IE 中也会发生这种情况)。我的目标是让文本选择工作，它返回给我 getClientRects。我所拥有的是一个简单的设置。我有一个容器 div，在该 div 中我放置了两个跨度:

<div onmouseup="mouseup()" id="container">
    <div class="span1">Span 1</div>
    <div class="span2">Span 2</div>
</div>

两个跨度都绝对定位在上/左和下/右 Angular 。容器的高度为100px；

鼠标松开时运行此函数:

function mouseup(){
    var selectObj = ((window.getSelection)?window.getSelection():document.getSelection());
    alert(selectObj.getRangeAt(0).getClientRects().length);
}

在 Chrome 上，如果您尝试选择范围 1 到范围 2 之间的文本，它将警告长度为 3，这正是我想要的，因为这让我知道文本选择的边界框在哪里。在 Internet Explorer 上，尽管它总是返回 0。如果我仅在单个范围内选择文本，它将起作用，但一旦您选择多个范围，它就会失败。

这是所有设置的 jsFiddle:http://jsfiddle.net/v6sa71hs/

Answer 1

看来你不能那样做。如果您告诉所有内容 float ，然后将其定位在 margin-top/left 上，它将起作用。这是两个跨度的 css

span{
    float: left;
    margin-bottom: -100%;
    margin-right: -100%;
}

更新的 fiddle :http://jsfiddle.net/9gemwtc5/