Question

我在添加到标题中的图像出现问题它似乎没有在Chrome中显示但在Safari和Firefox上显示。我在屏幕的左上方有3个黑色横幅/标志。中间不显示在铬上。有没有人有建议或想法为什么不显示？

        header.php:

    <div class="header_inner clearfix">
    <div class="marketing-top">
    <a href="#"><img src="/wp-content/uploads/2015/04/Banner-header-marketing.png" alt="marketing"></a>
    <a href="#"><img class="space" src="/wp-content/uploads/2015/04/Banner-header-design.png" alt="design"></a>
    <div class="header-img animated swing">
    <a href="#"><img src="/wp-content/uploads/2015/05/banner-header-web-design.jpg" alt="webdesign"></a>
    </div>
    </div>

css:
.marketing-top {
padding-left: 180px;
position: absolute;
float: left;
left: 100px;
}
.marketing-top .space{
position: absolute;
float:left;
left:280px;
bottom:57px;
}
.header-img {
position: absolute;
float:left;
left:230px;
bottom:0px;
}
@media screen and (max-width: 1250px) {
.marketing-top{
display: none;
}
}
.swing {
animation-name: swing;
transform-origin: center top 0;
}
.animated {
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes swing {

0% {
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}

20% {
transform: rotate(1deg);
animation-timing-function: ease-in-out;
}
40% {
transform: rotate(-1deg);
animation-timing-function: ease-in-out;
}
60% {
transform: rotate(0.5deg);
animation-timing-function: ease-in-out;
}
80% {
transform: rotate(-0.5deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotate(0deg);
animation-timing-function: ease-in-out;
}
}

提前致谢！

Vonwelzen

相关网址：http://www.elephantdesign.nl

6小时前

Answer 1

因为.header-img的宽度在你的情况下为0。明确指定宽度大于图像宽度

.header-img{
width:50px;
}

图像不会在Chrome中显示，而是在Safari＆amp;火狐

1 个答案: