为什么滚动到文本片段会破坏我的 CSS 布局？

Question

当点击 Google SERP 的结果时，有时会在 URL 请求中添加滚动到文本片段，例如

https://example.com/#:~:text=Lorem%20Ipsum

，并以紫色突出显示目标文本。这非常简洁，但它破坏了我的 CSS 布局。

在页面其他位置的一个 div 上（不是突出显示的那个），我使用绝对定位的 :before 元素向 100% 宽的 div 顶部添加圆角效果。

圆角伪元素从任一侧被修剪掉，因为它是位置：绝对的，并且不在页面流中。但是，当添加了滚动到文本片段（突出显示页面上方的段落）时，出于某种原因，允许伪元素将屏幕推得更宽并破坏页面布局。

我是否忘记了 CSS 的工作原理，或者这是一个错误？

作为一种解决方法，我尝试使用 JS 来检测此问题

window.location.hash

，以便我可以动态删除漂亮的圆形效果，但是 JS 无法检测到滚动到文本片段哈希（至少在 Chrome 中）。感谢您的帮助。

Answer 1

最佳选择：

您可以尝试为 ::target-text 伪元素指定样式。如果您为目标文本添加自定义样式，则 ::before 元素从浏览器的默认目标文本样式添加和继承的任何内容都不应再添加。

另一种选择：

您可以使用文档策略指令完全关闭页面的目标文本突出显示。将此行添加到页面的响应标头中：

Document-Policy: force-load-at-top 如果 UA 根本不修改您的样式，它可能不会破坏您的布局。

其他常见误解：

检测UA是否支持目标文本的规范方法是Document.fragmentDirective是否存在。

就检测突出显示的目标文本而言（您尝试从

window.location.hash读取目标文本）。 规范明确禁止 UA 使目标文本可由作者脚本（javascript）观察。

指示的确切外观和机制保留为 UA 定义的。但是，UA 不得使用任何可观察到的方法 作者脚本，例如文档的选择，用于指示文本 匹配。这样做可能会导致内容泄露的攻击媒介。

因此您将无法检测是否链接了目标文本或链接了哪些目标文本。