url''可能是个问题

Question

“徽标”类中的背景图片不会显示在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似乎没问题。

Answer 1

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

你有：

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

但是在CSS中：

 .Headcontain {...

和

 .logo {...

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

Answer 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''可能是个问题

Answer 3

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

背景图像冲突与背景图片一起？

因为css层次结构中的规则

背景图像不会在IE 8上显示

3 个答案:

url''可能是个问题