使用CSS剪切图像,使用FireFox和IE7 +时一切看起来都很不错,但是Chrome和Safari并不能很好地接受position:absolute。实际上,它不是使用“相对”于父容器,而是使用绝对定位坐标。

我尝试过以不同的方式放置容器并放置容器,但是我没有任何运气。

不幸的是,我无法直接提供任何示例。

这是HTML:

<div class="grayBkgd marginTop10Px grid_3 grayVideoContainer alpha">
    <a href="?ytID" class="noUnderlineHover curser-pointer">
        <div class="clip">
            <img src="an image" alt="" />
        </div><br />
        <div class="videoTextInfo">
            <p class="videoTitle">Optical Windows Overview
            </p>
        </div>
        <p class="grayText" style="float:right">0:37 mins</p>
    </a>
</div>


CSS:

<style type="text/css">
        .grayVideoContainer{
            text-align:center;
            padding:3px 0 5px 0
        }
        .clip img {
            position:absolute;
            margin-left:-58px;
            clip:rect(12px 120px 79px 0)
        }
        .videoTextInfo {
            min-height:60px;
            padding:70px 5px 0 5px;
            color:#000
        }
        .grayText {
            float:right;
            margin-top:-10px;
            padding:0 5px 0 0
        }
</style>


有任何想法吗?

我尝试寻找JQuery插件来裁剪图像,看看是否可以更轻松地定位元素,但是我没有太多运气找到任何有前途的插件。

最佳答案

父容器是否放在所有位置?如果不是,请尝试将position: relative;添加到position: absolute;的孩子的父母。相对位置不会更改父级在网站流中的位置,但可以让您绝对定位子级。

10-07 19:38
查看更多