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

【问题标题】：CSS: help positioning a clipped image in Chrome/Safari. IE and FireFox look goodCSS：帮助在 Chrome/Safari 中定位剪切的图像。 IE 和 FireFox 看起来不错
【发布时间】：2011-02-25 05:39:53
【问题描述】：

使用 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 插件来剪辑图像，看看是否可以更轻松地定位元素，但我没有找到任何有前途的插件。

【问题讨论】：

标签： css google-chrome css-position

【解决方案1】：

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

【讨论】：

我不是没有添加我所有的 CSS 尝试。我添加了位置：相对于父容器。我也曾想过那会是解决办法。
如果我们可以通过 jsfiddle.net 之类的方式查看您的 CSS，那么帮助您将更加“不可能” - 如果不知道您父母的所有这些课程中的内容，那么几乎不可能知道是什么导致了这个问题。
其实刚刚想通了。这确实与您的两个答案有关。我把 position:relative 放在错误的父容器上，然后我把 left 属性放回去。因为你说出了我的想法，所以我回去尝试了一下，发现我没有看到最直接的父 div。在那里添加它并且它有效！谢谢！
是的，我知道哈哈。有很多答案人们无法提供帮助，或者我最终自己弄清楚了，我不想接受错误的答案并可能把别人搞砸。干杯。

【解决方案2】：

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

见：http://www.w3schools.com/css/pr_class_position.asp

.clip img 上的 margin-left 我可能不希望工作。

【讨论】：

是的，我知道这一切并且已经尝试过了。不是问题。
我确实最终再次使用了 left 属性，但我认为其他人的回答使我能够弄清楚 8-)。感谢您抽出宝贵时间提供帮助！