WebKit 浏览器中的 CSS 定位错误

Question

我已经尝试了所有方法，但无法在 Chrome 或 Safari 中使用此叠加层...有什么想法吗？箭头应该像在 Firefox 和 IE 中一样在拇指上方。

在 Chrome 中：

在 Firefox 中：

我的代码：

.hm_tst_dv_img {
    height: 80px;
    width: 131px;
    display: block;
    float: left;
    margin: 0 3px 20px 0;
    position: relative;
    overflow: hidden;
}

.hm_tst_dv_img_thumb {
    height: 80px;
    width: 131px;
    display: block;
    float: left;
    clear: both;
    position: relative;
    top: 0;
    z-index: 90;
}

.hm_tst_dv_img_overlay {
    height: 80px;
    width: 131px;
    display: block;
    float: left;
    margin: 0;
    position: relative;
    top: -80px;
    z-index: 100;
}

<div class="hm_tst_dv_img">
    <div class="hm_tst_dv_img_thumb">
        <img alt="" src="<?php echo base_url(); ?>
            uploads/testimonials/thumb_
            <?php echo $testimonial->image; ?>"
            width="131" height="80" />
    </div>
    <div class="hm_tst_dv_img_overlay">
        <a href="javascript:void(0);" onclick="PlayTestmoinalVideo(<?=$i;?>)">
            <img src="<?php echo base_url(); ?>images/testimonial_overlay.png" />
        </a>
    </div>
</div>

Answer 1

试试这个：

.hm_tst_dv_img_overlay {
    height: 80px;
    width: 131px;
    display: block;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

如果可以避免的话，我不会混合定位和浮动。