谷歌浏览器在新标签页或新窗口中打开链接时会清除当前页面的CSS样式

11

这是一个奇怪的问题,我已经花了3天进行故障排除。

只发生在Windows上的Chrome Version 53.0.2785.116 m (64-bit)浏览器中。

Web服务器必须设置标题(元标记在这种情况下不起作用):

Apache的.htaccess: Header set Cache-Control "no-cache" 或nginx: add_header Cache-Control no-cache;

您无法使用jsfiddle或内置代码段来重新创建它,因为必须使用<link href='style.css' rel='stylesheet' type='text/css'>单独加载css文件。(但我仍将在片段中包含代码)。

重现步骤:

  1. 访问:http://test.xmpsoft.net/
  2. 点击链接1(应重新加载页面);
  3. 点击链接2(应打开新标签,显示相同的页面);
  4. 切换回原始标签并重复相同的步骤;
  5. 原始标签中的所有CSS样式都消失了。
  6. 如果没有,请再次重复相同的步骤。

在提交给Google之前,请协助确保代码没有任何问题。

谢谢。

P.S. 还有另一种重现它的方法(这就是我在标题中提到“新窗口”的原因):访问相同的页面,重新加载它,右键单击 ->检查(打开新的开发工具窗口),切换回页面(如果无法重现,请重复)。

.menu div {
 display: inline-block;
 width: 15em;
 height: 15em;
}

.red {
 background-color: red;
}

.yellow {
 background-color: yellow;
}

.green {
 background-color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Chrome bug</title>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='menu'>
  <div class='red'>Red</div>
  <div class='yellow'>Yellow</div>
  <div class='green'>Green</div>
</div>
<a href='/'>1. Reload this page</a><br>
<a href='/' target='_blank'>2. Open same page in new tab</a>
</body>
</html>


1
这绝对是一个奇怪的问题。祝你好运解决它! - imjared
无法重现此问题。您能否查看Chrome开发工具中的网络选项卡,确认CSS是否已加载?您可能需要启用“保留日志”选项。 - Salman A
1个回答

6

我曾经疯狂地试图找到我的代码中出现问题的位置!好消息! - Marlon Patrick

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接