图像不显示 - 样式“display:none”来自哪里?

时间:2014-07-17 16:11:16

标签: html css

我在一个相当简单的网站中包含一张图片,但它没有出现。在Chrome中检查元素样式会显示最终(在所有继承样式之后的顶部)样式

element.style {
  display: none !important;
}

果然,如果我取消设置该样式,则会出现图形轮廓并调整页面高度以适应它。但我不知道这种风格来自哪里 - 它似乎是动态添加它的东西。这是我用来创建页面的Django模板(图像是<div class="secondary col">):

{% load markup %}
<!doctype html>
<html lang="en">
    <head>
    <title>Holden Web: {{ flatpage.title }}</title>
    <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <link href="{{ STATIC_URL }}normalize.css" rel="stylesheet" type="text/css" />
    <link href="{{ STATIC_URL }}styles.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
                <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Comfortaa:700' rel='stylesheet' type='text/css'>

    </head>
    <body>
        <div class="bluebar"> </div>
        <header class="pageheader shadow">
            <h1><a href="/">Holden Web</a></h1>
            <div class="tagline">What you'll need to know tomorrow</div>
            <nav class="pagenav">
                <ul class="inline_list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/projects/">Projects</a></li>
                    <li><a href="/partners/">Partners</a></li>
                    <li><a href="/training/">Training</a></li>                                                                  [13/1858]
                    <li><a href="/contact/">Contact</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="http://holdenweb.blogspot.com/">Blog</a></li>
                </ul>
            </nav>
        </header>
        <div class="content">
            <section class="secondary col">
            <div>
            <a href="http://www.jdoqocy.com/click-7520687-11258637" target="_top">
            <img src="http://www.awltovhc.com/image-7520687-11258637" width="200" height="200" alt="O'Reilly 50% Ebook Deal of the Day" border="0"/>
            </a>
            </div>
            {% block secondary %}
            {% endblock %}
            </section>
            <section class="primary col">
            {% block primary %}
            {{ flatpage.content|markdown:"safe" }}
            {% endblock %}
            </section>
        </div>
        <footer class="vcard">
                        <div class="secondary col">
                        </div>
                        <div class="primary col">
                                <h1>Holden Web, LLC</h1>
                                <p>Email: <a href='mailto:info@holdenweb.com' class="email">info@holdenweb.com</a>Phone: <span class="tel
">1.800.494.3119</span></p>
                                <nav>
                    <ul class="inline_list">
                        <li><a href="/">Home</a></li>
                        <li><a href="/projects/">Projects</a></li>
                        <li><a href="/partners/">Partners</a></li>
                        <li><a href="/partners/">Partners</a></li>
                        <li><a href="/training/">Training</a></li>
                        <li><a href="/contact/">Contact</a></li>
                        <li><a href="/about/">About</a></li>
                        <li><a href="http://holdenweb.blogspot.com/">Blog</a></li>
                    </ul>
                                </nav>
                                <p><a href="http://theopenbastion.com/">The Open Bastion</a></p>
                        </div>
        </footer>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </body>
</html>

第一个样式文件是normalize.css v3.0.1styles.css如下所示。

body{font:62.5% arial, helvetica, sans-serif;min-width:815px;background-color:#f6f6ef}
.pageheader{font-size:1.4em;background-color:#f6f6ef;padding:0 2em;height:10em;border-bottom:1px solid #eae7d1}
.pageheader h1{margin:0;position:relative;top:1em;display:inline-block}
.pageheader h1 a{background:transparent url(images/logo.png) no-repeat left top;display:block;text-indent:-9999em;height:225px;width:207p
x}

/*logo flip*/
.pageheader h1 a:hover{
-webkit-transition-delay:.5s;
-moz-transition-delay:.5s;
-webkit-transform-style:preserve-3d;
-webkit-transition: -webkit-transform 1.7s;
-webkit-transform:rotateX(360deg);
-moz-transform:rotateX(360deg);
-moz-transform-style:preserve-3d;
-moz-transition-duration: 1.5s;
}

.tagline{font-size:2em;font-weight:bold;color:rgba(0,0,0,.1);
    font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
    margin:-6em 0 0 30%;
    -moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;
    }
.tagline:hover{color:rgba(0,0,0,.2);text-shadow:3px 3px 4px rgba(0,0,0,.2);}
h1,h2,h3,.h1,.h2,.h3,.inline{font-family:"Gill Sans","Gill Sans MT","Trebuchet MS",sans-serif;color:#444}
.content div section p strong {font-weight:bold;font-size:18px}                                                                 [28/1894]
.content a {color:#449}
.content a :hover{color:#66c}
h1{margin:.5em 0 .25em}
h2{margin:.6666em 0 .3333em}
h3{font-size:16px;margin:7px 0 5px}
.content{font-size:1.3em;background-color:#fff;padding:0 2em;z-index:10}
.content p{line-height:1.7142;margin:.5em 0}
.content ul{list-style-position:outside;padding-left:1em;list-style-type:none}
.pagenav{margin:.6em 0 0 30%}
.pagenav a{font-size:1.0714em;color:#4646e9;font-weight:bold;text-transform:uppercase;text-decoration:none;text-shadow:1px 1px 2px rgba(0
,0,0,.2);
-moz-transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
}
.pagenav a:hover{
text-decoration:underline;
/* just a little too much
font-size:110%;
-moz-transform:scale(2);
-webkit-transform:scale(2);
-moz-text-size-adjust: 120%;
-webkit-text-size-adjust: 120%;*/
}
ul.inline_list{list-style-type:none;padding:0;margin:0}
ul.inline_list li{display:inline;margin-right:1em}

.col{padding:1em 0}
.secondary{line-height:1.6;float:left;width:25%;overflow:hidden;padding-top:11em}
.primary{font-size:1.0769em;line-height:1.6;width:60%;margin-left:30%;max-width:700px;padding-bottom:3em}

footer{font-size:1.3em;clear:both;background-color:#f6f6ef;padding:.5em 2em;border-top:1px solid #092694;height:14em}
footer .primary{padding-top:0;padding-bottom:0}
footer .primary nav{margin-top:.5em}
.bluebar{
background-image: linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -o-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -moz-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -webkit-linear-gradient(bottom, #092794 0%, #5475EE 100%);
background-image: -ms-linear-gradient(bottom, #092794 0%, #5475EE 100%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #092794),
    color-stop(1, #5475EE)
);
}
footer p{margin:.5em 0}
.bluebar{height:20px}
footer h1{font-size:1.2em}
.email{margin-right:1em}
.shadow{box-shadow:1px 1px 2px rgba(0,0,0,.2)}
.footnav ul{list-style-type:none;position:absolute;top:-6em;left:27em}
.hw{border-bottom:1px solid #eee;padding-bottom:3em}
.hw,.tob{margin:3em 0}

狡猾的线索将帮助我再次行动。

2 个答案:

答案 0 :(得分:16)

这可能是因为本地计算机上运行了广告拦截软件。

答案 1 :(得分:-1)

为了我自己,我已经重新命名了图片。

pic_300_600.png:不工作

pic300_600.png : 有效