CSS 水平菜单栏在 Internet Explorer 中显示正确，在 Google Chrome 中显示没有样式答案

【问题标题】：CSS Horizontal menu bar displays correct in Internet Explorer, displays with no style in Google ChromeCSS 水平菜单栏在 Internet Explorer 中显示正确，在 Google Chrome 中显示没有样式
【发布时间】：2017-06-16 06:54:57
【问题描述】：

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 只是显示带有

的项目符号列表

标记为链接。未应用任何样式。

【问题讨论】：

请尝试在隐身模式下检查或使用 ctrl+F5 刷新您的页面。您的 css 中没有任何内容需要为特定浏览器编写。
工作正常jsfiddle.net/f580fnxy
你的代码没有什么需要修改的，它对我来说很好，在这里创建了一个小提琴..只需检查jsfiddle.net/satyaprasanna/29of4gze

标签： html css web menubar

【解决方案1】：

它会起作用，您可能在正确包含 css 文件时犯了一些错误，或者您必须清除缓存 ..使用 Ctrl+Shift+R 或从谷歌浏览器的设置中清除浏览器缓存（或执行重载+空缓存)

我在这里添加工作代码。试试看吧

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>

【讨论】：

【解决方案2】：

Chrome 中可能存在一个错误，即 CSS 不会自行刷新并使用存储在缓存中的 CSS。纠正的方法是在谷歌浏览器上打开源代码，点击你的 CSS 文件，用 F5 刷新你的 CSS 文件，然后刷新你的正常页面。

【讨论】：

【解决方案3】：

您如何参考样式？

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

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

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

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

也清除缓存并尝试。

【讨论】：

【解决方案4】：

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

添加：

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

【讨论】：

【解决方案5】：

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

【讨论】：