Question

HTML

<div id="banner" style="display: block; background-image: url('images/swirl_home.gif'); background-repeat: no-repeat; background-color: #e7e7e7;">
    <div id="Hi">
                some text here...
        </div>  

    <div id="loader">
        <img src="images/ajax-loader.gif"  />
        </div>
    </div>

的CSS

#banner {
    background-color: #e7e7e7;
    min-height: 285px;
}

以上代码在Mozilla和Chrome中完美呈现。在IE 6/7/8中完全失败。背景图片没有显示。我可以看到文字。

我做错了什么......？

编辑：这不是图像路径的问题。我试着给出一条绝对的路径。没工作。

Answer 1

当您使用IE不支持的#banner

时，您需要为min-height css规则设置一个高度

把

height:auto!important;
height:285px;
min-height:285px;

它应该有用..

Answer 2

试试这个，它会使加载程序图像在调用时显示为div背景。

 #loader {
        background-image:url (images/ajax-loader.gif);
/*Don't forget to set width and height to the size of your loader image here*/
        }

还尝试在CSS中完全保留您的样式，看起来您有内联样式以及带有横幅ID的cSS样式，如果您想在页面上多次使用它，请将其更改为类而不是ID：在CSS和HTML .loader中使用#loader代替<div class="loader"> </div>。  是一个非破坏性空间，只是一个非可视填充物，可以强制显示DIV。

除此之外，图像的路径可能会被破坏，但我从来没有听说过IE弄乱图像路径与其他浏览器的区别。

Answer 3

解决了它。图像没有显示的原因是我没有提到高度/宽度限制。我能说什么，IE只会带来每个人的邪恶。

IE中的背景图片

3 个答案: