overflow:auto does not show scrollbar until

问题:

I have a element on my form that looks like this:

<div style="overflow-y:auto;overflow-x:hidden;height:100%;width:100%">

In IE7 when the page first renders, there are no scrollbars. However, if I resize the page (even just 1 pixel) the scroll bars appear properly.

Is there something I can do so that the scrollbars show properly when the page first displays?

回答1:

Set overflow-y to "scroll" if you always want a scrollbar.

回答2:

That's the kind of problem which comes from the hasLayout bug in IE6 and IE7. It affects how IE renders the page. To get rid of the problem, you should consider reading this great page about the hasLayout behavior and its hacks. There's also the official Microsoft hasLayout dedicated page.

The hacks suggested are height: 0; and zoom: 1; depending on the version of IE you want to target and the type of your element.

回答3:

I used overflow: scroll and it fixed my issue with the disappearing scrollbar on load. My tables are dynamically created and should scroll automatically when the page loads as I have enough data to start with.

I didn't have to make any other changes. Now it works in all three browsers IE7, IE8 and FF.

回答4:

You should add margin-right: 20px to your style, so the scrollbar will have enoguh place to be displayed.

回答5:

Try Internet Explorer 9 and see if your current script works there. Most probably it does work there, and if so, you might rethink your inner desire to make it all compatible with previous versions of Internet Explorers like 7 etc

With Chrome and FireFox stealing away audiences from IE to fast, I forecast that its only a matter of time that before such questions will be obsolete...

回答6:

try absolute widths and heights, upon resize IE7 may be calculating the dimensions itself when you go to resize to page, whereas on page load it isnt...