Web Kit, Css Clip forcing scrollbar

Question

I have a large sprite image with a link around it, the link has a parent property, and the image has a child property.

I use the css clip method to pull out a specific image fragment. However, in my Chrome browser , although I position my child element to be absolute and giving it a hidden overflow , this leads to the browser having a vertical / horizontal scroll bar.

.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;
}

Using: <a href="/" class="parent"> <img src="largeImage.png" class="child" /> </a>

Works fine in Firefox and 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;
}