Html <；部门>；背景不'；不能改变，但只能在铬中改变_Html_Css_Google Chrome

Html <；部门>；背景不'；不能改变，但只能在铬中改变

html css google-chrome

Html <；部门>；背景不'；不能改变，但只能在铬中改变,html,css,google-chrome,Html,Css,Google Chrome,我用一个类标记了一个，并且我改变了背景颜色，在页面顶部创建了一个实心横幅。这在Firefox和IE中起作用，但在Chrome中不起作用。我还发现，如果我应用内联样式（与外部样式表相反），那么Chrome会承认它我宁愿不使用内联样式，因为它会给维护带来痛苦。我进一步探究，发现Chrome也不喜欢将颜色应用于其他背景我被这件事吓坏了。正如我所说：它在其他浏览器中工作，所以我想知道不同平台之间的CSS层次结构是否不同。有人知道发生了什么事吗？如果你能给我一个解决方案，我将不胜感激，但如果你能解释的

我用一个类标记了一个

，并且我改变了

背景颜色，在页面顶部创建了一个实心横幅。这在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>

您提供的代码在Chrome中工作。
看
然而，我看到您在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;
}

这在您的代码中都可以找到，但应该避免使用。
您可以尝试使用ctrl+f5强制刷新chrome，这将正确刷新CSS
 你能和一个用户共享呈现的HTML吗？你最好的选择是使用chrome开发者工具进行一些调查。右键单击未显示所需方式的元素并选择“检查”

，然后在控制台窗口中查找显示样式的零件，单击“计算”选项卡并向下滚动到背景。在这里，您将能够准确地看到当前应用的样式，如果您单击箭头将其展开，您将能够看到样式的来源，帮助您识别潜在的样式冲突。您是指屏幕截图吗？谢谢delinear，我将试一试。苏莉，我需要你详细说明一下。它是最小的，因为我对层次结构感兴趣，包括HTML和CSS，并且是可验证的。如果你让我知道你想改变什么，那么我可以看看做什么，谢谢！我会仔细检查一下，看看是否有帮助。我是否也应该将分号放在列表的最后一个元素上？我能弄清楚这是否是个人喜好。你有没有在Chrome或者JSFIDLE上试用过？在我的版本中，添加分号并没有修复横幅，不幸的是只是一个提示-如果它是样式块中声明的最后一个规则，则不需要用分号（

；

）终止样式规则。您不能仅将分号添加到类的最后一行。如果你不在一个类的中间添加一个分号，那么另一行就不适用了。谢谢，这只是我在<>代码>页脚< /代码>中的两个，我错过了，你就是一个传奇！很高兴能帮忙！

.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;
}