0

“徽标”类中的背景图像不会在 IE8 上显示。在stackoverflow中环顾四周后，我尝试将图像更改为PNG格式。它仍然不会显示。

这是我的 div 的基本结构。

<header>
     <div class="headcontain">
          <div class="logo">
                <div class="nav2"></div>
                <div class="fbmainlike"></div>
          </div>
     </div>
</header>

这是CSS 

.header {
    background-color: #2B2B2B;
    width: 100%;
    height: 50px;
    margin: 0px auto;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #666;
}
.headcontain {
    background-color: #2B2B2B;
    width: 1043px;
    margin: 0px auto;
    height: 50px;
}
.logo {
    width: auto;
    height: 50px;
    background-image: url(image/logo2.png);
    background-repeat: no-repeat;
    background-size: 130px 49px;
    background-color: #2B2B2B;
}
.nav2 {
    height: inherit;
    width: 300px;
    margin-left: 150px;
    float: left;
}
.fbmainlike {
    padding-top: 12px;
    width: 450px;
    float: right;
    color:#FFF
}

背景图像在 Firefox 上可见，Chrome 似乎很好。

4

3 回答 3

4

您似乎在选择器中混合了大写和小写。

你有：

 <div class="headcontain">
      <div class="Logo">

但在 CSS 中：

 .Headcontain {...

和

 .logo {...

CSS 选择器区分大小写。尝试统一 CSS 和 HTML 中的选择器。

于 2013-09-06T07:40:08.963 回答
2

添加overflow: hidden; height: 1%;到您的.logo

尝试这个：

.logo {
    width: auto;
    height: 50px;
    background-image: url('image/logo2.png');
    background-repeat: no-repeat;
    background-size: 130px 49px;
    background-color: #2B2B2B;
    overflow: hidden;
    height: 1%;
}

没有内引号 ' ' 的 url 可能是个问题

于 2013-09-06T07:39:24.530 回答
0 
.logo {
    width: auto;
    height: 50px;
    background-image: url(image/logo2.png);
    background-repeat: no-repeat;
    background-size: 130px 49px;
    background-color: #2B2B2B;
}

background-image 是否与 background-image冲突？

由于 CSS 层次结构中的规则

于 2013-09-06T07:46:07.433 回答