我希望有人能够在这里帮助我。我已尽力简化我的示例。
我有一个绝对定位的 DIV,在本例中我已将其填充到浏览器窗口中。该div具有overflow:auto属性,可以在内容太大而无法显示DIV时提供滚动条。
在 DIV 中,我有一个表格来显示一些数据,其宽度为 100%。
当内容在垂直方向变得太大时,我希望出现垂直滚动条,并且表格会稍微水平收缩以容纳滚动条。然而,在 IE7 中,尽管仍然有足够的水平空间容纳 div 中的所有内容,但也会出现水平滚动条。
这是 IE 特有的 - Firefox 完美运行。
完整来源如下。非常感谢任何帮助。
Tony
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Table sizing bug?</title>
<style>
#maxsize
{
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
border: 5px solid silver;
overflow: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="maxsize">
<p>This will be fine until such time as the vertical size forces a
vertical scroll bar. At this point I'd expect the table to re-size
to now take into account of the new vertical scroll bar. Instead,
IE7 keeps the table the full size and introduces a horizontal
scroll bar.
</p>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
</tr>
</tbody>
</table>
<p>Resize the browser window vertically so this content doesn't
fit any more</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
<p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
</div>
</form>
</body>
</html>
添加于 2010 年 3 月 16 日...我认为指出 GWT 的源代码在评论中指出这个问题可能会很有趣......
我在 IE7 中遇到了水平条过多的问题。我使用了 D Carter 的解决方案,稍作改变
<div style="zoom: 1; overflow: auto;">
<div id="myDiv" style="zoom: 1;">
<table style="width: 100%"...
...
</table>
</div>
</div>
要在 IE 7 以下的浏览器中工作,您需要添加:
<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)