Question

您好！希望对此有所帮助......如果您在FireFox中查看上面的链接，您将能够看到每个绿色行中的文本。然而在Chrome中出于某种原因隐藏了文字背后，我玩过Z-index，但是还有其他我想念的东西吗？

HTML：

<!-- Video Row 1 -->
<div class="row">
    <img src="images/thumb1.png" alt="Top five tips, facts, myths, and heartburn treatments."/>
    <div class="copyBox">
        Top five tips, facts, myths, and heartburn treatments.
            <img class="float_right" src="images/play_button.png" />
    </div>

</div>

CSS：

.row {
    float:left;
    width:300px;
    height: 60px;
    background: url(../images/tile_row.jpg) repeat-x;
    clear: none;
    z-index: -1;
}

.copyBox {
    float:right;
    text-align: left;
    width: 192px;
    height: 60px;
    font-family: arial;
    font-size: 12;
    left: 5px;
    top: 5px;
    z-index: 1;
}

Answer 1

你需要将.copyBox的宽度减少到~190px。文本被推出容器。此外，您可以删除z-index，因为它只适用于定位元素，您应该为字体大小指定单位：）

在Chrome中，我的文字隐藏在我的背景图片后面

1 个答案: