CSS 的跨浏览器替代品：具有伪类

Question

我正在寻找一个跨浏览器兼容的 CSS 选择器，以防止打开模式时主体滚动。

目前，我正在使用带有选择器的 CSS

:has

伪类：

body:has(dialog.active) {
  /* prevent scroll stuff*/
}

但是，Firefox 不支持此选择器。

是否有替代的 CSS 选择器可以达到相同的结果？请注意，我无法在页面上添加或修改任何 JavaScript 或 HTML，因此解决方案必须完全基于 CSS。

提前感谢您提供的任何帮助。

Answer 1

如果有一个替代选择器可以达到相同的结果，那么我们为什么需要

:has

？没有替代选择器。

我们过去显示对话框的方式是用一个绝对定位的、部分透明的

<div>

覆盖屏幕，然后让对话框出现在里面，或者前面。这可以防止人们在对话框后面的页面上click。不确定它是否可以防止滚动——我没有调查过。

我的建议是无论如何都使用

:has

。 Firefox 最终会添加支持，与此同时，您的网页仍可在 Firefox 中使用，只是不如您希望的那样可用。火狐的市场份额只有3%。