Internet Explorer getClientRects элементы с абсолютным позиционированием

В настоящее время у меня проблема с выделением текста в IE 11 (хотя это случается и в предыдущих IE). Моя цель - заставить работать выделение текста, при котором он возвращает мне getClientRects. У меня простая установка. У меня есть контейнерный 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/


javascript internet-explorer highlight internet-explorer-11
person Mathew Berg    schedule 25.11.2014    source источник
comment
Это старый пост, но, поскольку раньше это было решение, оно больше не является решением для последних версий IE и Edge. В настоящее время используется IE 11.3 и Edge 44.   -  person chitgoks    schedule 26.04.2019
comment
@chitgoks Я видел ваш комментарий по проблеме с github. Я больше не использую pdf.js, поэтому не смогу изучить его. Удачи. Если вы найдете решение, дайте мне знать, и я обновлю свой ответ ниже.   -  person Mathew Berg    schedule 26.04.2019
comment
сделаю, если когда-нибудь. Но я плохо разбираюсь в css. Я полагаю, что опубликую решение, если кто-то это выяснит.   -  person chitgoks    schedule 28.04.2019

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, ты просто не можешь этого сделать. Если вы вместо этого укажете, что все должно плавать, а затем разместите его с помощью margin-top / left, он будет работать. Вот CSS для обоих диапазонов

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

Обновленная скрипка: http://jsfiddle.net/9gemwtc5/

person Mathew Berg    schedule 27.11.2014