CSS 水平菜单栏在 Internet Explorer 中显示正确，在 Google 中显示无样式 Chrome

Question

CSS 水平菜单栏在 Internet Explorer 中显示正确，在 Google 中显示无样式 Chrome..

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: relative;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Chrome 只是显示带有

标签作为链接的项目符号列表。未应用样式。

Answer 1

Chrome 中可能存在错误，其中 CSS 未自行刷新并使用存储在缓存中的 CSS。纠正方法是打开 Google Chrome 上的源代码，单击 CSS 文件，使用 F5 刷新 CSS 文件，然后刷新正常页面.

Answer 2

它会工作你可能在正确包含 css 文件时犯了一些错误，或者你必须清除缓存..使用 Ctrl+Shift+R 或从 [=24 的设置中清除浏览器缓存=] chrome（或者硬重载+清空缓存）

我在此处添加工作代码。试试吧

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
top: 0;
width: 100%;
}

li {
float: left;
}

li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Answer 3

您是如何参考样式的？

如果这是与您的 index.html 文件位于同一目录中的文件夹，则类似这样，

<link rel="stylesheet" href="styles/index.css">

确保您的 CSS 和 HTM/HTML 文件使用相同的编码！

如果您的 HTM/HTML 文件编码为 UNICODE，您的样式表也必须如此。

也清空缓存试试

Answer 4

实际上很简单。查看 sheet Chrome 正在使用的样式后，发现它并没有刷新样式 sheet。

添加：

强制浏览器使用正确的版本。

Answer 5

关闭 Internet Explorer 兼容性视图设置 通常它会解决您的问题。

CSS 水平菜单栏在 Internet Explorer 中显示正确，在 Google 中显示无样式 Chrome

CSS Horizontal menu bar displays correct in Internet Explorer, displays with no style in Google Chrome

html

css

menubar

web