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