Question

我有一个大的精灵图像，周围有链接，链接有父属性，图像属于子属性。

我正在使用 css clip 技术来拉取图像的特定部分。但是，在我的 Chrome浏览器中，即使我定位我的子元素绝对并给它溢出 < strong>隐藏这会导致浏览器包含垂直/水平滚动条。

.parent{
    margin-top: 10px;
    text-decoration: none;
    display: block;

}
.child {
    border: 0;
    position: absolute;
    margin-top: -154px;
    clip: rect(152px, 296px, 234px, 0px);
    float: left;
    overflow: hidden;
}

使用方法： <a href="/" class="parent"> <img src="largeImage.png" class="child" /> </a>

在firefox和Internet Explorer 8中正常工作。

Answer 1

必须在父元素上将overflow属性设置为hidden，以隐藏其子元素的溢出部分内容。

（旁边：overflow会影响块容器元素;我不确定它应该对其他元素做什么。有关详细信息，请参阅此处：http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping）

您的CSS，已更新：

.parent{
    margin-top: 10px;
    text-decoration: none;
    display: block;
    overflow: hidden;
}

.child {
    border: 0;
    position: absolute;
    margin-top: -154px;
    clip: rect(152px, 296px, 234px, 0px);
    float: left;
}

Webkit，Css Clip强制滚动条

1 个答案: