Question

我已将<div>标记为一个类，我已更改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&copy; 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
}

Answer 1

您提供的代码适用于Chrome。见app.get

但是，我发现您在几个地方的CSS中遗留了分号，这可能会影响特定版Chrome中的渲染。

.footer {
    position: absolute;
    clear:both /* this */
    padding-bottom:0 /* and this */
    padding-left : 0px;
    bottom: 0;
    width: 100%;
    min-height: 60px;
    height:100%;
    background-color: #f5f5f5;
}

这可以在整个代码中找到，但应该避免使用。

Answer 2

您可以尝试使用ctrl + f5强制刷新chrome，这应该正确刷新CSS。

<div>后台不会更改，但仅限Chrome

2 个答案: