29 html xhtml internet-explorer 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
cet*_*nar 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]-->
小智 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上似乎并不是必需的.
更改:
overflow: auto;
至:
overflow-y:hidden;
overflow-x:auto;
小智 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
去那里阅读有关布局的更多信息
| 归档时间： |
|
| 查看次数： |
65515 次 |
| 最近记录： |