备用样式表在Chrome中不起作用

Question

我需要诊断Chrome中CSS问题的帮助。我什至不知道如何诊断这个问题。我只是想知道下一步应该做什么。

就解决方案而言，我已经检查了这个问题，但不是很清楚。我也尝试过这种解决方案（先禁用所有样式，然后再启用一种样式），但是它不起作用。我认为这个问题不适用，因为我们没有从外部域中撤出，因此这不是跨域问题。

问题：

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）尝试alternate从rel="alternate stylesheet"定义的一部分中删除。

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

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

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启用和禁用这些定义，这就是我们所需要的。