Question

使用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插件来剪辑图像，看看我是否能更容易地定位元素，但我没有找到任何有希望的插件。

Answer 1

应使用top，left，right和/或bottom指定绝对定位元素的位置。

请参阅：http://www.w3schools.com/css/pr_class_position.asp

margin-left .clip img我可能希望不起作用。

Answer 2

父容器是否完全定位？如果没有，请尝试将position: relative;添加到position: absolute;的子级的父级。相对定位不会改变父母在您网站流程中的位置，但可以让您拥有绝对定位的孩子。

CSS：帮助在Chrome / Safari中定位剪裁的图像。 IE和FireFox看起来不错

2 个答案: