为什么我的html代码不显示？答案

【问题标题】：Why is my html code not displayed?为什么我的html代码不显示？
【发布时间】：2015-02-26 19:49:34
【问题描述】：

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

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

问题出现在谷歌浏览器中，但不在 Internet Explorer 中。在 Internet Explorer 中，页面按预期呈现。

【问题讨论】：

它必须包含在标签中，因为标签告诉浏览器这是一个 HTML 文档。
我的问题是较大页面的一部分。我现在包含了更多代码。我可能会尝试解决这个问题。

标签： html css google-chrome debugging jinja2

【解决方案1】：

替换你的类 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>

【讨论】：

【解决方案2】：

您的背景图片似乎有问题。尝试删除 -1010px 和 -27px。

例如：

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

演示： Jsfiddle

【讨论】：