Javascript 文本选择闪烁

如何使div按以下格式布局时的文本选择平滑。 您可以看到，在选择过程中，选择高光跳到顶部并闪烁。 尝试选择文本“第二行” 也不是说我无法控制位置、左侧和顶部样式属性，因为它们是由第三方设置的。我可以添加其他样式

<div>
<div style="position:absolute ;left: 100.178px; top: 10.523px">FIRST</div>
<div style="position:absolute;left: 180.61px; top: 10.523px;">LINE</div>
<div style="position:absolute; left: 100.178px; top: 30.523px;">SECOND</div>
<div style="position:absolute;  left: 190.61px; top: 30.523px;" >LINE</div>

第一
线
第二
线

---

首先，你需要去掉

位置：绝对

来改进选择，无论如何，我想这是不可能的？在这种情况下，我想到的唯一解决办法是在文本的下一部分之间用白色填充“`”

---

演示：

首先，您需要去掉

位置：绝对

以改进选择，无论如何，我猜这是不可能的？在这种情况下，我想到的唯一解决办法是在文本的下一部分之间用白色填充“`”

---

演示：

以下是我的想法：

HTML-

设置<代码>高度：18px规范化选择高度；设置

width:81px

桥接左右

div

s之间的间隙，使其刚好接触，但不会重叠。不需要充满不间断空格的

div

，因此我将其

显示设置为
none
。如果可以，请完全删除该元素

通过在第一个“行”
div
和“第二个”
div
之间添加一个
div
来防止第二行跳转到第一行。这在两行之间起到了分隔符的作用，因此当选择跳转到上一个
div
时，您不会看到任何图形更改

padding right:100px
扩展了
div
的框，允许您将光标进一步拖动到文本的右侧，并且仍然保留对该行的选择。我不建议将其设置为低于
10px
，否则在选择第二行时，第一行的最后一个字符可能会闪烁

只要正确地重复这些类并在每个
div.line
和下面的
div.tag
之间添加间隔符
div
，此方法应适用于任意数量的行

演示：
以下是我的想法：

HTML-

设置<代码>高度：18px规范化选择高度；设置
width:81px
桥接左右
div
s之间的间隙，使其刚好接触，但不会重叠。不需要充满不间断空格的
div
，因此我将其
显示设置为
none
。如果可以，请完全删除该元素

通过在第一个“行”
div
和“第二个”
div
之间添加一个
div
来防止第二行跳转到第一行。这在两行之间起到了分隔符的作用，因此当选择跳转到上一个
div
时，您不会看到任何图形更改

padding right:100px
扩展了
div
的框，允许您将光标进一步拖动到文本的右侧，并且仍然保留对该行的选择。我不建议将其设置为低于
10px
，否则在选择第二行时，第一行的最后一个字符可能会闪烁

只要正确地重复这些类并在每个
div.line
和下面的
div.tag
之间添加间隔符
div
，此方法应适用于任意数量的行

演示：
要扩展我关于扩展div以消除间隙的评论，这里有一些css可以添加到示例中的页面中

设置div的宽度以覆盖左侧和右侧列之间的间隙。我已将边框、边距和填充设置为零，并设置了线条高度以使事物看起来整洁：

div { border: 0; margin: 0; padding: 0; line-height: 18px; }
div div { width: 81px; height: 18px; }

小提琴：

如果您事先知道文本的外观（例如，如果您有一个结果表），这是最简单的选择

如果线的布局不一致，可以使用javascript计算div的适当宽度——遍历左手div，从下一个同级的位置中减去“left”位置。使用JQuery很容易做到这一点。
要详细介绍我关于扩展div以消除差距的评论，这里有一些可以添加到示例页面中的css

设置div的宽度以覆盖左侧和右侧列之间的间隙。我已将边框、边距和填充设置为零，并设置了线条高度以使事物看起来整洁：

div { border: 0; margin: 0; padding: 0; line-height: 18px; }
div div { width: 81px; height: 18px; }

小提琴：

如果您事先知道文本的外观（例如，如果您有一个结果表），这是最简单的选择

如果线的布局不一致，可以使用javascript计算div的适当宽度——遍历左手div，从下一个同级的位置中减去“left”位置。使用JQuery很容易做到这一点。
您必须替换绝对定位，并将其重新定位为相对定位。我使用以下jQuery实现了这一点，但如果需要，可以直接使用javascript实现

$(document).ready(function() {
    $('div[style*="position"]').each(function() {
        var $this = $(this);
        if ($this.css('position') === 'absolute') {
            var offset = $this.offset();
            $this.css('position', 'relative');
            $this.offset(offset);
        }
    });
});

这里的工作小提琴：
您必须替换绝对定位并重新定位为相对定位。我使用以下jQuery实现了这一点，但如果需要，可以直接使用javascript实现

$(document).ready(function() {
    $('div[style*="position"]').each(function() {
        var $this = $(this);
        if ($this.css('position') === 'absolute') {
            var offset = $this.offset();
            $this.css('position', 'relative');
            $this.offset(offset);
        }
    });
});

在这里演奏小提琴：
试试这首歌


第一
线
第二
线

它以相同的方式呈现/显示，只是不同的代码，并修复了突出显示问题。。
表的行为类似于常规的div标记，只需确保没有边框（border=“0”）。希望这对你有帮助。=）
试试这个解决方法


第一
线
第二
线

它以相同的方式呈现/显示，只是不同的代码，以及
<table>
    <tr>
        <td>FIRST</td>
        <td>LINE</td>
    </tr>

    <tr>
        <td>SECOND</td>
        <td>LINE</td>
    </tr>
</table>