30

我希望有人可以在这里帮助我。我尽量简化我的例子。

我有一个绝对定位的 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>

2010 年 3 月 16 日添加...认为在评论中指出 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

4

8 回答 8

34

我在 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]-->
于 2009-05-18T20:02:29.180 回答
9

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。

于 2009-10-08T19:39:18.377 回答
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/onhavelayout.html
去那里阅读更多关于布局的信息

于 2009-01-23T21:26:46.617 回答
5

改变：

overflow: auto;

至：

overflow-y:hidden;
overflow-x:auto;
于 2008-09-26T12:25:07.897 回答
2

这在 GWT trunk 中报告已修复。

于 2009-10-13T13:46:25.883 回答
1

如果是 body 标签坚持水平滚动（我猜是因为我将子元素设置为 100%），您可以将其添加到您的 CSS 以解决 IE7（或 8 兼容模式）中的问题：

html{overflow-x:hidden;}
于 2011-03-03T11:22:04.670 回答
0

只要您不反对条件语句，这看起来应该可以解决您的问题。 修复 IE 溢出

于 2008-09-26T12:10:46.150 回答
0

不幸的是，这是 IE 的一个怪癖。没有办法使用纯 XHTML 和 CSS 让它与 Firefox 一样工作。

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

于 2008-12-04T20:25:46.817 回答