在ie11中看不到背景图像

时间:2014-10-04 10:10:20

标签: html css internet-explorer

我正在尝试使用应用于列表项的背景图像生成流程图。

应用于列表项的background-image在IE11中不可见(所有版本IE10,9等)。

CSS代码

      body{padding: 50px 0;}
        .status-line {
    width: 80%;
    margin: 0 auto 3%;
      }

     .status-line ul li {
    text-align: center;
    width: 25%;
    background-image: url("../images/middleCircle.png");
    background-size: 190px;
    background-repeat: no-repeat;
    float: left;
      }
     .status-line ul li:first-child {
      background-image: url("../images/first-circle.png");
     }
     .status-line ul li:last-child {
    background-image: url("../images/endcircle.png");
    background-size: 34px;
      }
     .status-line span {
    padding: 7px 0 2px 0;
    width: 24px;
    text-align: center;
    border-radius: 50%;
    margin: 3px 0 0 8px;
    color: rgb(153,153,153);
    font-size: 12px;
    display: inherit;
      }
    .status-line #step3{
    /*font-size: 14px;*/
    padding: 7px 0 5px;
    text-align: center;
    width: 24px;
    }
    .status-line ul li:first-child span {
    margin-left: 3px;
    }
    .status-line ul li  .process-done {
    padding: 20px 0 4px 0;
    background: #0abc70 url("../images/tick-mark.png");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: 50%;
    }
    .status-line ul li  .processing {
    background: #5776e3;
    color: #ffffff;
    }

HTML CODE:

       <ul class="cf">
                            <li><span id="step1" class="process-done"></span><h1>Application<br>     Received</h1>
                            </li>
                            <li>
                                <span id="step2" class="process-done"></span><h1>Requirements<br> Received &amp; Reviewed</h1>
                            </li>
                            <li>
                                <span id="step3" class="processing">
                                    3
                                </span><h1>Offer</h1>
                            </li>
                            <li>
                                <span id="step4">
                                    4
                                </span><h1>Offer <br> Accepted</h1>
                            </li>
                        </ul>

我附上了IE,chrome,firefox中可见的截图。

Chrome

Firefox

IE11

任何帮助将不胜感激

1 个答案:

答案 0 :(得分:0)

检查您的IE设置是否设置为显示图片。

要调整Internet Explorer以便显示图像,请执行以下操作:

  • 打开Internet Explorer。

  • 单击“工具”菜单,然后单击“Internet选项”。

  • 单击“高级”选项卡。

  • 向下滚动“设置”列表,直至看到“多媒体”。

  • 确保选中了“显示图片”复选框。

  • 单击“确定”,然后再次单击“确定”。