带溢出的DIV:自动和100%宽的桌子

时间:2008-09-26 12:03:54

标签: html internet-explorer xhtml html-table

我希望有人能够在这里帮助我。我尽力简化我的例子。

我有一个绝对定位的DIV,在这个例子中我填写了浏览器窗口。这个div有overflow:auto属性,当内容太大而无法显示DIV时提供滚动条。

在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=en#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

8 个答案:

答案 0 :(得分:34)

我在IE 7中遇到过度水平条的问题。我使用了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]-->

答案 1 :(得分:8)

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上似乎并不是必需的。

答案 2 :(得分:5)

变化:

overflow: auto;

为:

overflow-y:hidden;
overflow-x:auto;

答案 3 :(得分:5)

好吧,这个让我困扰了很长时间。我做了太多的设计,在右边有额外的填充,允许IE完全忽略他们自己的滚动条。

答案是:嵌套两个div,给它们两个hasLayout,设置内部一个溢出。

<!-- 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
去那里阅读有关布局的更多信息

答案 4 :(得分:2)

答案 5 :(得分:1)

如果是body标签坚持使用水平滚动(我猜因为我将子元素设置为100%),你可以将它添加到你的CSS中以修复IE7(或8兼容模式)中的问题:

html{overflow-x:hidden;}

答案 6 :(得分:0)

这看起来应该可以解决您的问题,只要您不与条件语句相关联即可。 Fixing IE overflow

答案 7 :(得分:0)

不幸的是,这是IE的一个怪癖。使用纯XHTML和CSS无法使其与Firefox一样工作。

您可以使用JavaScript来检测窗口的大小并动态设置表的宽度。如果你真的想走这条路,我可以添加更多细节。