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

回避できるのであれば、ポジショニングとフロートを混在させません。