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

http://codepopper.com/leon/health/在Chrome中，我的文本隐藏在我的背景图片后面

您好！希望对此有所帮助...如果您在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; 
}

来源

2011-04-29 Leon Gaban

你需要减少对.copyBox到宽×190px。文本被推出容器。此外，你可以删除Z索引，因为它只适用于定位元素，你应该为你的字体大小指定单位:)

来源

2011-04-29 21:00:20 imjared

哦，谢谢！这固定了它：D不能相信Chrome是超过2像素挑剔。另一个快速Q，我将如何将播放按钮对齐到右下角？ – 2011-04-29 21:11:36

我会添加和修改以下规则： '.copyBox {position：relative; } img.float_right {position：absolute;顶部：28px;左：100px的; }' 设置.copybox的相对位置可以让内部的一切都能够定位到你想要的位置。 – imjared 2011-04-29 21:24:17

啊甜美的thx！：d – 2011-04-29 21:32:41

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

回答

相关问题