Internet Explorer getClientRects 绝对定位元素答案

【问题标题】：Internet Explorer getClientRects absolute positioned elementsInternet Explorer getClientRects 绝对定位元素
【发布时间】：2019-04-26 18:17:29
【问题描述】：

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

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

两个跨度都绝对定位在上/左和下/右角。容器的高度为 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/

【问题讨论】：

这是一篇旧帖子，但鉴于这曾经是一个解决方案，对于最新版本的 IE 和 Edge，它不再是一个解决方案。当前使用 IE 11.3 和 Edge 44。
@chitgoks 我看到了你对 github 问题的评论。我根本不再使用 pdf.js，所以无法探索这个。祝你好运。如果您确实找到了解决方案，请告诉我，我会在下面更新我的答案。
如果有的话。但是我对css不好。我想如果有人想出来我会发布解决方案。

标签： javascript internet-explorer highlight internet-explorer-11

【解决方案1】：

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

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

更新小提琴：http://jsfiddle.net/9gemwtc5/

【讨论】：