Question

我添加了徽标图片，然后在查看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中，页面按预期呈现。

Answer 1

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

例如：

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

演示： Jsfiddle

Answer 2

将您的类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代码没有显示？

2 个答案: