1

我对这段代码有问题：

CSS：

        #pageBound{
            float:left;
            position:relative;
            left: 50%;
        }
        #page{
            float:left;
            position:relative;
            right: 50%;
        }
        .scroll{
            height: 150px;
            overflow-y: auto;
        }
        .myTable{
            border-collapse: collapse;
        }
        .myTable td{
            border: 1px solid black;
            padding: 10px 5px;
        }

HTML

<div id='pageBound'>
    <div id='page'>
        <div class='scroll'>
            <table class='myTable'>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
                <tr><td>25.08.12 22:32:59</td></tr>
            </table>
        </div>
    </div>
</div>

这里的工作示例：http: //honzabrabec.cz/test/overflow.html

在除 Opera 之外的所有浏览器中，它都会稍微缩小表格（将滚动条附加到内部），因此表格中的行会中断。在表格周围添加另一个带有填充的包装器并不能解决问题。但是，如果我将 'overflow-y:auto' 更改为 'overflow-y:scroll' 它在除 IE 之外的所有浏览器中都可以正常工作。如果我将另一个带有“溢出-y：滚动”的表添加到此页面，同样的修复甚至可以工作。

我希望它的行为方式与现在在 Opera 中的行为方式相同。这意味着桌子不会缩小。换句话说，我需要表格以与溢出 div 不存在相同的方式显示。

4

2 回答 2

0

你可以更换

.scroll {
    height: 150px;
    overflow-y: auto;
}

和

.scroll {
    height: 150px;
    overflow-y: scroll;
}

但问题是如果表格的高度可以小于 150px，也会有一个滚动条，即使它不是必需的。

编辑：

对不起，你已经知道了。

但我会选择适用于兼容浏览器的解决方案。

对于使用 IE 的用户，您可以尝试使用 javascript 解决方案：http ://remysharp.com/2008/01/21/fixing-ie-overflow-problem/

于 2012-08-29T21:32:19.050 回答
0

你可以加

.myTable{
white-space: nowrap;
}

但随后它出现了一个水平滚动条。

然后，您可以添加

.myTable{
white-space: nowrap;
margin-right: 17px;/* or more */
}

它适用于 Firefox，但也许有一个浏览器有 30px 的滚动条......

于 2012-08-29T21:17:55.233 回答