Web-kit, Css Clip forcing scrollbar

I have a large sprite image with a link aro开发者_StackOverflowund it, the link has a property of parent and the image a property of child.

I am using the css clip technique to pull a particular piece of the image. However, in my chrome browser even though I am positioning my child element absolute and giving it an overflow of hidden it is causing the browser to have vertical/horizontal scrollbar.

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

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

Works fine in firefox and Internet Explorer 8.

The overflow property must be set to hidden on the parent element in order to hide the overflowing portion content of its child elements.

(Aside: overflow affects block container elements; I'm not sure what if anything it's supposed to do on other elements. See here for details: http://www.w3.org/TR/CSS21/visufx.html#overflow-clipping )

Your CSS, updated:

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