css - div 背景图像无法在 chrome 中正确显示

Question

我正在帮助一位设计师 friend 处理一个有问题的页面，它也让我陷入困境。整个页面应该有 4 个带有背景图像和文本的 div。该页面在 IE 和 FF 中按预期显示，但在 chrome 中只有加载时可见的 div 显示它的背景图像。此外，如果您突出显示它们应该占据的空间，其他人将会显示。

我创建了页面的删除版本作为示例:http://furrylogic.net/playground/rose/example.html

如有任何反馈或建议，我们将不胜感激。谢谢!

Answer 1

我认为这将归因于糟糕的标记。

以您的 <div id="hope"> 为例:

目前

<div id="hope">
    <div class="hinside">
        <center>
           <p></p>
           <h1 style="color: rgb(255, 255, 255); text-transform: uppercase; opacity: 1;" data-    sb="fadeInDown" class="sb-effect-displayed animated fadeInDown">You are Loved!</h1>
           <p>&nbsp;</p>
           <p></p>
        </center>
    </div>
</div>

可以简化为:

HTML

<div id="hope" class="banner-image">
    <h1 data-sb="fadeInDown" class="sb-effect-displayed animated fadeInDown">You are Loved!</h1>
</div>

CSS

.banner-image {
    width: 100%;
    margin: 20px 0;
    padding: 0;
}
.banner-image h1 {
    text-align: center;
    margin: 80px 0;
    padding: 0;
    text-transform: uppercase;
    color: #fff;
}

这只是为了让您走上正轨，注意我已经删除了空的 <p>来自 <h1> 的标签和填充.如果您提供 JsFiddle，我可以举一个工作示例.