Html @支持Internet Explorer浏览器的CSS替代方案

在建立我的个人网站时，我已经到了一个尽可能实现跨浏览器兼容的阶段。在可能的情况下，我在默认样式之前添加了“备份”样式行：

.selector {
  position: flex; /* backup style */
  position: grid; 
}

但是，在标题上，我需要一个

位置：sticky

。Internet Explorer。所以我认为使用

@不支持（位置：sticky）

。我试过了，但没用。我确信它应该可以工作，因为它应该支持所有浏览器！在我死后就不会了

---

我之所以特别需要使用

@supports

，而不仅仅在

位置：sticky

之前使用

位置：fixed

作为备份，是因为我还需要为其他内容设置一个上边距，使其看起来相同：

@supports not (position: sticky) {
  header {
    position: fixed;
  }

  .content {
    margin-top: 500px;
  }
}

我也读过这篇文章，这对我的情况没有什么帮助

---

如果浏览器不支持

position:sticky

，是否有其他替代方法将样式更改为多个元素？

为缺少的

position:sticky

支持创建样式表，然后撤消这些更改并以肯定的

方式应用

position:sticky

：

标题{
位置：固定；
}
.内容{
边缘顶部：500px；
}
@支架（位置：粘性）{
标题{
位置：粘性；
}
.内容{
页边距顶部：0；/*或之前的任何内容*/
}
}

我认为您最好在这里使用ie的媒体查询。您可以在这里找到更多信息：@JayNyxed谢谢您的回复。我将尝试这些方法，如果有帮助，我将以重复的方式结束我的问题。IE不支持。这是问题的一部分=）@JayNyxed:因此它忽略了

@supports

块，并按预期接收带边距的

位置：fixed

。@JayNyxed这确实有效。相反，IE将使用

position:fixed

，然后支持

position:sticky

的现代浏览器将覆盖fixed。大脑袋，干得好！