我需要一些帮助来诊断 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) 尝试从基本定义 (layer.css) 中删除
title
。
大家还有其他想法吗?如果我找到解决方案,我会发布它。
答案是删除“标题”属性并删除样式表定义的“替代”部分。所以样式表现在像这样链接:
<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 打开和关闭,这正是我们所需要的。