Scrollbar disappearing in IE7
I have a div set to overflow: auto, max-width of 250px.
Inside the div I have a paging control, which allows users to pull back 10, 20, 50, or 100 results. If they pull back enough results, the inner content (table) will grow larger than the div and should then be scrollable.
This works fine in Firefox 3.5 and IE8, however in IE7, the scrollbar only shows after the first postback that requires a scrollbar (e.g. user selecting 20). If the user then selects another amount that requires the 开发者_高级运维scrollbar (50, 100), the bar in IE7 will disappear.
If the user goes back to 10 results (no scroll needed), then proceeds to 20 results (scroll needed) the scrollbar will once again show up in IE7.
I can still scroll the inner content with my mousewheel, there is just no scrollbar.
Anyone know what the issue could be? I'm stumped... can provide details if needed.
Clarification: The scrollbar is disappearing even when the content is overflowing the Div.
Change the CSS property overflow from auto to scroll
See http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow
I had a similar issue and managed to resolve it. Now, understand I had the width of a table set to 100%. I believe the problem is related to the doctype. I tried setting the doctype to
<!DOCTYPE html> <!-- HTML5 -->
and I still had the same problem. It was only after removing the doctype declaration that the IE7 bug went away (quirks mode, which I wouldn't recommend). I have also tested it using XHTML 1.0/1.1/HTML 4.01 doctype declarations (Strict, Transitional, Frameset) and the same problem occurs. It appears this issue arises because using a doctype declaration tells the browser to use standard mode. IE7 and less does not handle standard mode browsing very well.
To resolve it for IE7, I set the width to 99%.
Here is working sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#Content
{
overflow-y: auto;
overflow-x: hidden;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="Content">
<table width="99%" border="1">
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</tbody>
</table>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论