我已经<div>用一个类标记了a 并且我已经更改了background-color在页面顶部创建一个实心横幅。这在 Firefox 和 IE 中有效，但在 Chrome 中无效。我还发现，如果我应用内联样式（而不是外部样式表），那么 Chrome 确实会承认它。
我宁愿不使用内联样式，因为它会导致维护的痛苦。我进一步探索，发现 Chrome 也不喜欢将颜色应用于其他背景。
我被这个甩了。正如我所说：它适用于其他浏览器，所以我想知道平台之间的 CSS 层次结构是否不同。有谁知道发生了什么？我会很感激有一个解决方案，但如果你能解释一下，那就更是如此了。
我正在尝试将 CSS 应用于 .banner
这是 HTML：
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
<meta name = "viewport" content="width=device-width", initial-scale=1>
<link rel="icon" href="favicon.ico">
<title>{% block title %}MyBlog Title{% endblock title %}</title>
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<!-- MyBlog custom styles -->
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% render_block "css" %}
</head>
<body>
<div class="wrapper">
<!--<div class="blog-header"></div>-->
<div class ="banner">
<h1 id="test">My blog</h1>
<!--<img class = "blog-header" src="../../media/images/banner.png">-->
</div>
{% cms_toolbar %}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a href=""><img src="{% static '#' %}"/></a>-->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 0 100 "menu.html" %}
</ul>
</div>
</div>
</nav>
<div class="container-full">
{% block content %}{% endblock content %}
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container-full">
<p class="text-muted">{% block footer %}My blog© 2015{%endblock footer%}</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
<script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>
{% render_block "js" %}
</body>
</html>
和 CSS：
html {
position : relative;
min-height: 100%;
margin: 0;
padding: 0;
height: 100%
}
body {
/* Margin bottom by footer height */
/*margin-bottom: 60px;*/
font-family : Georgia, "Times New Roman", Times, serif;
color: #555;
width: 100%;
height: 100%;
min-height:100%;
margin: 0;
padding: 0
}
.wrapper {
min-height:100%;
margin-bottom:-60px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
font-weight: normal;
color: #333;
}
.footer,.push {
height:50px;
}
.footer {
position: absolute;
clear:both
padding-bottom:0
padding-left : 0px;
bottom: 0;
width: 100%;
min-height: 60px;
height:100%;
background-color: #f5f5f5;
}
footer.footer {
position: relative;
bottom: 0;
width: 100%;
}
.blog-header {
display: block;
width: 100%;
border-style: solid;
/*border-bottom: solid #C6C6C6*/
}
.container-full {
margin: 0 auto;
width: 100%;
padding: 0
}
.blog-title {
margin-top: 30px;
width: 500px;
margin-bottom: 0;
font-size: 28px;
font-weight: normal;
}
.blog-description{
font-size: 20px;
color: #999;
}
.sidebar-module{
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
margin-bottom: 0;
}
.pager {
margin-bottom: 60px;
text-align: left
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
.blog-post{
margin-bottom: 60px;
}
.blog-post-title{
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color : #999;
}
body > container {
padding: 0px 0px 0
}
.container .text-muted {
margin: 0 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 0;
bottom:0
}
.row {
margin-right: 0px!important;
}
.navbar { margin-bottom: 0 }
.footer { margin-bottom: 0 }
.banner {background-color: green;
min-height: 120px
}
您可以尝试使用 ctrl + f5 强制刷新 chrome，这应该会正确刷新 CSS。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句