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>

兩個跨度均絕對位於上/左和下/右角。 容器的高度為100像素；

將鼠標移到該函數上即可運行：

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

看來您無法那樣做。 如果您改為告訴所有內容浮動，然后將其定位在margin-top / left處，則它將起作用。 這是兩個跨度的css

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

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