在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中，我的文本隱藏在我的背景圖片後面

回答

相關問題