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）的错误偏移

有什么方法可以绕过这种行为吗？目前，只需要铬和莫扎拉的兼容性。

Answer 1

您没有获得偏移的原因是因为span元素是内联的。要解决此问题，请将以下代码添加到HTML页面的head部分：

<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));
});

html内联节点，文本兄弟错位

1 个答案: