css - 替代样式表在 Chrome 中不起作用

Question

我需要一些帮助来诊断 Chrome 中的 CSS 问题。我什至不确定如何诊断此问题。我只是想知道下一步应该是什么。

就解决方案而言，我已经检查了this question但不是很清楚。我也试过this solution (禁用所有样式然后启用一个)但它不起作用。我不认为this question适用，因为我们不是从外部域中提取数据，所以这不是跨域问题。

问题:

Chrome 似乎忽略了我们的备用样式表定义。在我们的应用程序中，我们使用备用样式表和 Javascript 例程来更改背景颜色。此代码正在运行，并且在 Firefox 和 IE 中仍在运行，但在某些时候它在 Chrome 中停止运行。样式表定义如下:

    <link type="text/css" rel="stylesheet" title="white" property="stylesheet" href="/myapp/css/layer.css" />
    <link type="text/css" rel="alternate stylesheet" title="silver" property="stylesheet" href="/myapp/css/medium.css" />
    <link type="text/css" rel="alternate stylesheet" title="grey" property="stylesheet" href="/myapp/css/dark.css" />
    <link type="text/css" rel="alternate stylesheet" title="beige" property="stylesheet" href="/myapp/css/beige.css" />
    <link type="text/css" rel="alternate stylesheet" title="green" property="stylesheet" href="/myapp/css/green.css" />

这里是原来的正文定义:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #282828;
    height: 100%;
    background: #fff url(../images/header-bg.jpg) center top no-repeat;
    min-width: 1024px;
}

应该在其中一个备用样式表中被(例如)覆盖:

body {
    background: url("../images/header-bg-dark.jpg") no-repeat center top #919194;
}

但这在 Chrome 中不起作用。我尝试了以下方法:

1) 跟踪 JS 代码并验证 CSS 工作表是否正确启用/禁用:

        if (document.styleSheets.item(i).href.indexOf("medium") > -1) {
            document.styleSheets.item(i).disabled = false;
        } else if (document.styleSheets.item(i).href.indexOf("dark") > -1
                || document.styleSheets.item(i).href.indexOf("beige") > -1
                || document.styleSheets.item(i).href.indexOf("green") > -1) {
            document.styleSheets.item(i).disabled = true;
        }

2) 查看计算样式，只有基本样式显示 - 就像 Chrome 忽略了其他样式。

3) 尝试从定义的 rel="alternate stylesheet" 部分中删除 alternate。

4) 尝试从基本定义 (layer.css) 中删除 title。

有人有其他想法吗？如果我找到解决方案，我会发布它。

Answer 1

答案原来是删除“title”属性并删除样式表定义的“alternate”部分。所以样式表现在是这样链接的:

<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/medium.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/dark.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/beige.css"/>" />
<link type="text/css" rel="stylesheet" property="stylesheet" href="<c:url value="/css/green.css"/>" />

不知道为什么原始定义不起作用，但新定义起作用并且可以使用 JS 打开和关闭，这正是我们所需要的。