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;
}

这只是为了让您走上正确的轨道，请注意我已从<p>删除了空的<h1>标记和填充。如果您提供JsFiddle，我可以举例说明。

Answer 2

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

Answer 3

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

div背景图像在chrome中无法正常显示

3 个答案: