带溢出的DIV：自动和100％宽表
我希望有人可以在这里为我提供帮助。我已尽力简化了我的示例。
我有一个绝对定位的DIV，在此示例中，我已填充了浏览器窗口。当内容太大而无法显示DIV时，此div的overflow：auto属性提供滚动条。
在DIV中，我有一个表格来显示一些数据，其宽度为100％。
当内容在垂直方向上变得太大时，我希望出现垂直滚动条，并且表格会稍微水平收缩以容纳滚动条。但是，在IE7中，尽管div中所有内容的水平空间仍然足够，但水平滚动条也会出现。
这是特定于IE的Firefox完美的工作方式。
完整资料如下。任何帮助，不胜感激。
托尼
<!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>
添加了03/16/10 ...认为在注释中指出GWT的源代码指向此问题可能会很有趣... http://www.google.com/codesearch/p?hl=zh_CN#MTQ26449crI /com/google/gwt/user/client/ui/ScrollPanel.java&q=%22hack%20to%20account%20for%20the%22%20scrollpanel&sa=N&cd=1&ct=rc&l=48
解决方案
只要我们不习惯使用条件语句，这似乎就可以解决问题。修复IE溢出
改变：
overflow: auto;
到：
overflow-y:hidden; overflow-x:auto;
不幸的是，这是IE的一个怪癖。不能使用纯XHTML和CSS使它与Firefox一样工作。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
我们可以使用JavaScript来检测窗口的大小并动态设置表格的宽度。如果我们真的想走那条路，我可以添加更多细节。
好的，这个困扰了我很长一段时间。我进行了太多的设计，这些设计的右边有额外的填充，以允许IE完全忽略其自己的滚动条。
答案是：嵌套两个div，给它们两个都提供hasLayout，将内部的div设置为溢出。
<!-- zoom: 1 is a proprietary IE property. It doesn't really do anything here, except give hasLayout -->
<div style="zoom: 1;">
<div style="zoom: 1; overflow: auto">
<table style="width: 100%"...
...
</table>
</div>
</div>
http://www.satzansatz.de/cssd/onhavinglayout.html
去那里阅读更多关于布局的信息
我在IE7中出现了水平栏过多的问题。我用过D Carter的解决方案
<div style="zoom: 1; overflow: auto;">
<div id="myDiv" style="zoom: 1;">
<table style="width: 100%"...
...
</table>
</div>
</div>
要在小于7的IE浏览器中工作，我们需要添加：
<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->
Eran Galperin的解决方案无法说明以下事实：仅关闭水平滚动仍会允许表格在垂直滚动条下方重叠。我认为这是因为IE在确定需要垂直滚动条之前正在计算" 100％"的含义，然后无法针对可用的剩余水平空间进行重新调整。
但是，cetnar在上面的解决方案具有以下优点：
<div style="zoom: 1; overflow: auto;">
<div id="myDiv" style="zoom: 1;">
<table style="width: 100%">
...
</table>
</div>
</div>
在我的测试中，这在IE6和7上正常运行。据我所知，在IE6上，"" hack似乎并不是必需的。
据报道这已在GWT中继中修复。
