WebKit浏览器中的CSS定位错误

时间:2012-07-12 10:04:02

标签: google-chrome webkit css-float positioning

我已尝试过所有内容,但我无法在Chrome或Safari中使用此叠加层...任何想法?箭头应该像在Firefox和IE中一样在拇指上方。

在Chrome中:
Chrome and safari

在Firefox中:
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>

1 个答案:

答案 0 :(得分:0)

试试这个:

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

如果可以避免,我不会混合定位和花车。