div背景图片无法在chrome中正确显示

Question

我正在帮助一个有问题的页面的设计师朋友，这也让我陷入了一个循环。 整个页面上应有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;
}

这只是为了使您走上正确的轨道，请注意，我已经删除了<h1>中空的<p>标记和填充。 如果您提供JsFiddle，我可以举一个工作的例子。

Answer 2

删除背景附件：从所有这些ID（即＃time，＃bible，＃hand和#hope）中修复。 如果那不起作用，请告诉我。 :)

Answer 3

使用#h1上的样式或css将<h1></h1>标签更改为<h1><font id="h1"></font></h1>标签。 由于某些奇怪的原因，某些浏览器无法正确显示p和h1标签，而字体标签有时会消除这些标签。 我也建议使用字体而不是p来消除某些浏览器中的换行符。