【发布时间】：2011-09-14 04:34:36
【问题描述】：
我有一些带有页眉、页脚、左侧菜单窗格和内容的 CSS 代码。该布局适用于除 IE6 之外的所有浏览器。在 IE6 中，linksPanel div 无法在 masterContent div 中正确呈现。我相信它与位置元素有关。我查看了一堆文章，但未能找到有效的解决方案。不幸的是，我必须支持 IE6 并且需要一个解决方案。代码如下。任何帮助都将非常感激！
<!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></title>
<style type="text/css">
.masterContent
{
position:fixed;
top:178px;
bottom:42px;
left:0px;
right:0px;
overflow:auto;
background:#fff;
}
.linksPanel
{
position:absolute;
top:0px;
left:10px;
bottom:0px;
width:254px;
overflow:auto;
background:#f4f4f3;
line-height:20px;
padding:5px;
}
.mainPanel
{
position:absolute;
top:5px;
bottom:0px;
right:10px;
width:70%;
overflow:auto;
padding-left:10px;
padding-bottom:0px;
}
.footerPanel
{
position:absolute;
bottom:0px;
left:0px;
padding:0px;
margin:0px;
width:100%;
height:44px;
text-align:right;
overflow:hidden;
background:#f4f4f3;
z-index:100;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div class="headerPanel">
<p>Header stuff here.</p>
<p>More header stuff here.</p>
</div>
</td>
</tr>
</table>
<div class="masterContent">
<div class="linksPanel">
<p><a href="error.aspx">Link1</a></p>
<p><a href="error.aspx">Link2</a></p>
<p><a href="error.aspx">Link3</a></p>
<p><a href="error.aspx">Link4</a></p>
<p><a href="error.aspx">Link5</a></p>
<p><a href="error.aspx">Link6</a></p>
<p><a href="error.aspx">Link7</a></p>
<p><a href="error.aspx">Link8</a></p>
<p><a href="error.aspx">Link9</a></p>
<p><a href="error.aspx">Link10</a></p>
<p><a href="error.aspx">Link11</a></p>
<p><a href="error.aspx">Link12</a></p>
<p><a href="error.aspx">Link1</a></p>
<p><a href="error.aspx">Link2</a></p>
<p><a href="error.aspx">Link3</a></p>
<p><a href="error.aspx">Link4</a></p>
<p><a href="error.aspx">Link5</a></p>
<p><a href="error.aspx">Link6</a></p>
<p><a href="error.aspx">Link7</a></p>
<p><a href="error.aspx">Link8</a></p>
<p><a href="error.aspx">Link9</a></p>
<p><a href="error.aspx">Link10</a></p>
<p><a href="error.aspx">Link11</a></p>
<p><a href="error.aspx">Link12</a></p>
</div>
<div class="mainPanel">
<p>test content</p>
<p>test more content</p>
<p>test</p>
<p>test</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="footerPanel">
<p>Footer stuff here.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
【问题讨论】：
-
您正在使用表格进行布局。基于 CSS 的布局是否可以接受。此外，您的 .linksPanel 的位置为绝对值，其值为 top:0px 和 bottom: 0px; - 没有任何意义。删除两者之一。当你说“它没有正确渲染”时，你必须更具体。它是如何出现的，它有什么问题以及你希望它如何出现。在 IE9 和 IE6 中看起来一样
-
我可怜那个要求他的开发者仍然支持IE6的傻瓜。
-
@John：如前所述，您不能同时在顶部和底部放置一些东西。这是一个完美的编程矛盾。这几乎就像说你在芝加哥，而你在巴黎，或者你的衬衫需要小号同时又要特大号，或者灯在打开时关闭。这是网络编程，不是量子物理学。
-
@Sparky672, @Jawad:
top:0; bottom:0非常有意义。有关该主题的旧文章：alistapart.com/articles/conflictingabsolutepositions -
@Sparky672：没问题。你不会在我刚刚制作的演示中使用这种技术。我已经向您展示了一些您会使用它的实例。诀窍是知道何时使用它。在某些情况下，这是一个美丽而雄辩的解决方案。在其他情况下，这是一个糟糕的选择。
标签： css internet-explorer dhtml internet-explorer-6