为什么我的 html 代码没有显示？

Question

我添加了一个徽标图像，然后在 header 部分中的下面代码在查看 html 时不再显示。新图像似乎与旧内容重叠。我应该做哪些改变？

<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>

    <link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
    <link href="/static/css/common_in2.css?{{VERSION}}" rel="stylesheet" type="text/css">
    <link href="/static/css/list_in2.css?{{VERSION}}" rel="stylesheet" type="text/css">


</head>
<body>
{% include "kooltopbar.html" %}


<div id="wrapper">
        <h1 id="logo" class="sprite_index_in_in_en_logo spritetext"></h1>




    <header>  

        <nav class="navbar nohistory">
            <ul class="inlined">
                <li>
                    <a href="/">{% trans %}Home{% endtrans %}</a>
                </li>                 


                <li class="current">
                    <a href="/customer_service.htm">{% trans %}Customer Service{% endtrans %}</a>
                </li>

            </ul>
        </nav>


    </header>

CSS是

header .navbar {
    padding-top: 12px;
}

header .navbar a {
    text-transform: uppercase;
}

header {
    display: block;
    overflow: hidden;
    padding-bottom: 8px;
    margin-bottom: 16px;
    position: relative;
}

header h1 {
    margin: 0px;
}

header {
    border-bottom: 3px solid #f2663b;
}


.sprite_index_in_in_en_logo {
    margin-top: 35px;
    width: 1024px;
    height: 138px;
    background: url(/img/koolindex_in.png?3b31f98c531cac850b1c866f36c9fc3bbdbfbd26) no-repeat -1010px -27px;
}

问题出现在 google chrome 但 Internet Explorer 中没有。在 Internet Explorer 中，页面按预期呈现。

Answer 1

看来问题出在您的背景图像上。尝试删除 -1010px 和 -27px。

例如：

background: url(http://www.addnectar.co.in/ovenfresh/ovenfresh/images/gif1.gif) no-repeat;

演示： Jsfiddle

Answer 2

将您的 class sprite_index_in_in_en_logo 替换为下面提到的

<style>
header .navbar {
    padding-top: 12px;
}

header .navbar a {
    text-transform: uppercase;
}

header {
    display: block;
    overflow: hidden;
    padding-bottom: 8px;
    margin-bottom: 16px;
    position: relative;
}

header h1 {
    margin: 0px;
}

header {
    border-bottom: 3px solid #f2663b;
}


.sprite_index_in_in_en_logo 
{
margin-top: 35px;
width: 1024px;
height: 288px;
background: url(http://www.i2clipart.com/cliparts/4/8/0/e/clipart-simple-leaf-480e.png) no-repeat 0px;
}
</style>
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext"></h1>




<header>  

    <nav class="navbar nohistory">
        <ul class="inlined">
            <li>
                <a href="/">{% trans %}Home{% endtrans %}</a>
            </li>                 


            <li class="current">
                <a href="/customer_service.htm">{% trans %}Customer Service{% endtrans %}</a>
            </li>

        </ul>
    </nav>


</header>

为什么我的 html 代码没有显示？

Why is my html code not displayed?

html

css

debugging

google-chrome

jinja2