Overflow:hidden not working as expected in Google

问题:

I'm having a problem with the "overflow: hidden" CSS property.

In Firefox, IE8 and Safari 5 when I apply this property to a div that is used for containing ad banners (like adsense leader boards or flash) at the top of my content there is still some overlap happening in Chrome when the window is resized to be small enough that they collide.

In Firefox and IE8 it works as expected and everything is completely hidden behind the right sidebar. In Chrome the actual content is hidden but it is replaced with a white background that still overlaps and blocks out the sidebar.

I have linked to a screenshot showing what the problem looks like. Is there anything I can do to fix this?!

http://tinypic.com/r/259cs95/7

回答1:

I was facing problems with the below css in chrome. It was not working at all.

div.hidden {
    margin:0px 0px 10px 0px;
    overflow-y:hidden;
}

Now, I changed the above CSS as,

div.hidden {
    margin:0px 0px 10px 0px;
    overflow-y:hidden;
    position:relative;
}

It works fine for me.

回答2:

Likely there is some issue with your css or layout.

You could sidestep the issue by changing the z-index on your sidebar to be greater than the z-index of your ad, this would cause it to render above the add regardless. Make sure you define some value for position.