html встроенный узел с неправильным размещением текстовых братьев и сестер

Question

У меня есть следующий HTML:

<span as="0" style="display: block; -webkit-user-select: text; ">
"[TEXT]"
<span id="as_cursor" style="padding: 0px; margin:0px; width: 0px;"></span>
"[TEXT]"
</span>

Я использую внутренний промежуток в качестве маркера, из которого позже можно получить координаты с помощью jquery.offset (). Когда этот интервал совпадает с концом строки (как показано на экране, в текущем тексте нет символа eol), внутренний интервал отображается в начале (вверху слева) внешнего элемента, что дает ошибочное смещение (0,0) .

Есть ли способ обойти это поведение? В настоящее время требуется совместимость только с Chrome и Mozilla.

Answer 1

Причина, по которой вы не получаете смещение, заключается в том, что элементы span встроены. Чтобы решить эту проблему, добавьте следующий код в раздел head вашей HTML-страницы:

<style>
    .offsetFixed {
        display: inline-block;
    }

    #outerSpan {
        display: block;
        -webkit-user-select: text;
    }

    #as_cursor {
        padding: 0;
        margin: 0;
        width: 0;
    }
</style>

Дополнительно внесите следующие изменения в ваш HTML:

<span class="offsetFixed" id="outerSpan" as="0">"[TEXT]"
    <span class="offsetFixed" id="as_cursor"></span>"[TEXT]"
</span>

Затем вы можете использовать jQuery для получения правильного смещения:

$(document).ready(function () {
    var offset = $("#as_cursor").offset();
    alert(JSON.stringify(offset));
});