jquery - 如何编写仅在不支持 position:fixed 或 Jquery-test for position:fixed 时适用的 CSS 规则？

Question

我有两个 CSS 文件，我只能编辑第二个文件。

我的 HTML 元素：

<div class="ui-header ui-header-fixed"></div>

第一个 CSS 文件集：

.ui-header        { position: relative };
.ui-header-fixed  { position: fixed };

因此，当不支持position:fixed时，CSS 会退回到position:relative。但是，我需要它回退到position:absolute仅在这种特定情况下。

我正在寻找一种方法来使用position:absolute从第二个文件覆盖上述 CSS ，但前提是不支持position:fixed 。

问题：
这可能吗？我不能使用 Jquery 直接更改 CSS，但是如果有 JQuery 测试 position:fixed 被支持，那将是可用的（设置一个类添加一个 CSS 规则）

score 0 · Accepted Answer

您可以使用 jQuery 吸引 css-rules，如下所示：

var position = $("MyElement").css("position");

我不太确定这一点，但这应该返回的 css 值position。

score 0 · Accepted Answer

行。我找到了一个很好的解决方案：

http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED

检测是否支持 position:fixed 。如果不是，我noFix将向 html 元素添加一个类，然后在第二个文件中编写我的 CSS 规则，如下所示：

   .noFix .ui-header { positon: absolute; }

由于此规则在第二个文件中，因此position:relative仅当不支持位置固定时它才会覆盖第一个文件。

score 0 · Accepted Answer

你可以编辑元素吗？在您的第二个样式表中（假设它在头部第二个列出），添加

.ui-header-abs        { position: absolute };

并将元素本身更改为

<div class="ui-header ui-header-abs"></div>

失败：如果您只针对一个文档，并且可以编辑其<head>元素，您可能想尝试插入

<style type="text/css">
.ui-header        { position: absolute }
.ui-header-fixed  { position: fixed }
</style>

我相当肯定你实际上并不需要第二条规则。优先级规则有时仍然会让我感到困惑，但是 IIRC 文档中的样式元素会覆盖外部样式表（对于同一个选择器），因此这应该会覆盖第一个（不可编辑的）样式表中的两个规则。

如果您无法将该样式元素放入标题中，它可能会在正文元素中工作，但这是无效的。

我需要使用它，但这应该可以在没有 DOM 诡计的情况下使用普通的旧 CSS 及其优先规则来解决；我不明白为什么在这种情况下需要使 jQuery 复杂化。

score 0 · Accepted Answer

由于这个问题相当古老，这里有另一种方法可以更富有表现力地解决这个问题。（当时可能不可用）

.ui-header-fixed {
    position: fixed;
    @supports not (position:fixed) {
        position: absolute;
    }
}

4 回答 4