Html Web工具包,Css剪辑强制滚动条

Html Web工具包,Css剪辑强制滚动条,html,css,webkit,Html,Css,Webkit,我有一个很大的精灵图像,周围有一个链接,链接的属性是parent,图像的属性是child 我正在使用css剪辑技术提取图像的特定部分。然而,在我的chrome浏览器中即使我定位了我的子元素绝对并给它一个溢出的隐藏也会导致浏览器具有垂直/水平滚动条。 .parent{ margin-top: 10px; text-decoration: none; display: block; } .child { border: 0; position: absolu

我有一个很大的精灵图像,周围有一个链接,链接的属性是parent,图像的属性是child

我正在使用css剪辑技术提取图像的特定部分。然而,在我的chrome浏览器中即使我定位了我的子元素绝对并给它一个溢出隐藏也会导致浏览器具有垂直/水平滚动条。

.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;
}
用法:


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

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

(旁白:
overflow
影响块容器元素;我不确定它应该在其他元素上做什么。有关详细信息,请参阅此处:)

您的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;
}

我用一个在线图像测试了你的代码,没有看到任何带有chrome的水平滚动条。选中此处,将浏览器缩小到小于实际图像大小,您就有了一个垂直滚动条,甚至没有缩小它。没有立即为我工作;我必须将家长定位为(工作小提琴)(并为后者设置一个大小,因为其唯一的孩子不在流程中)。而且。。。回到Firefox^^