IE6中的CSS位置问题_Css_Internet Explorer_Dhtml_Internet Explorer 6

IE6中的CSS位置问题

css internet-explorer

IE6中的CSS位置问题,css,internet-explorer,dhtml,internet-explorer-6,Css,Internet Explorer,Dhtml,Internet Explorer 6,我有一些带有页眉、页脚、左菜单窗格和内容的CSS代码。该布局在除IE6之外的所有浏览器上都有效。在IE6中，linksPanel div不能在masterContent div中正确呈现。我相信这与position元素有关。我看了很多文章，但没有找到一个有效的解决方案。不幸的是，我必须支持IE6，需要一个解决方案。代码如下。非常感谢您的帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

我有一些带有页眉、页脚、左菜单窗格和内容的CSS代码。该布局在除IE6之外的所有浏览器上都有效。在IE6中，linksPanel div不能在masterContent div中正确呈现。我相信这与position元素有关。我看了很多文章，但没有找到一个有效的解决方案。不幸的是，我必须支持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>


.masterContent
{
位置：固定；
顶部：178px；
底部：42px；
左：0px；
右：0px；
溢出：自动；
背景：#fff；
} 
林克斯潘先生
{
位置：绝对位置；
顶部：0px；
左：10px；
底部：0px；
宽度：254px；
溢出：自动；
背景#f4f3；
线高：20px；
填充物：5px；
}
.主面板
{
位置：绝对位置；
顶部：5px；
底部：0px；
右：10px；
宽度：70%；
溢出：自动；
左侧填充：10px；
垫底：0px；
}    
.页脚面板
{
位置：绝对位置；
底部：0px；
左：0px；
填充：0px；
边际：0px；
宽度：100%；
高度：44px；
文本对齐：右对齐；
溢出：隐藏；
背景#f4f3；
z指数：100；
}            
标题在这里
这里有更多的标题
























测试内容
测试更多内容
试验
试验
Lorem ipsum dolor sit amet，是一位杰出的领导者。整只比勒蒂姆犬坐在阿梅特猫旁边。整数的最大直径。维韦拉·维利特·菲塞卢斯·乌尔特里斯。南马蒂斯，我们的共同目标，侵权行为的后果，我们的责任
试验
试验
试验
试验
这里是页脚

这是一个非常奇怪的设计，我确实见过一些奇怪的设计

您将所有内容都放在
元素中，我指的是所有内容，包括页眉、div#masterContent和页脚
你用的是桌子，我不知道为什么。您对表所做的一切都可以通过div来完成
您正在为div.masterContent设置一个位置：顶部为178px，底部为42px。您熟悉CSS中的定位概念吗？当您将任何元素的位置设置为“固定”时，无论是否向下滚动，该元素都会保留在屏幕上。这就是你想要的吗？如果你这样做了，我无法想象它会是一个什么样的页面
您正在为div.linksPanel指定一个绝对位置，顶部为0，底部为0，左侧为10px。正如我所说，这毫无意义。它怎么可能从顶部为0，从底部为0。使用左上角、右上角或左下角、右下角设置这些偏移特性
您的div.main面板也有相同的问题

我想，要么你完全误解了CSS的定位和布局，要么我完全不理解它。也许这就是你要找的

<!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" lang="en" xml:lang="en" dir="ltr">

 <head runat="server">
 <title>Document Template</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <link rel="stylesheet" type="text/css" href="basic.css" />
 </head>

 <body>

<div id="wrapper">

    <form id="form1" runat="server">

        <div id="header">
            <p>Header Stuff Here</p>
            <p>More Header Stuff Here</p>
        </div>

        <div id="content">
            <div id="links_panel">
                <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 id="main_panel">
                <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>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>

            </div>

            <br />
        </div>

        <div id="footer_panel">
            <p>Footer stuff here.</p>
        </div>
    </form>
</div>

基本上，您需要一个标题，后面是一个链接栏，左边应该有一个scroolbar，后面是一个主面板，它也应该有一个scroolbar，它必须在链接栏的右边，最后是一个fotter。

您使用表格进行布局。基于CSS的布局是可接受的答案吗。此外，.linksPanel还有一个绝对位置，其值为top:0px和bottom:0px；-没有任何意义。拆下两个中的任何一个。当你说“它没有正确渲染”时，你必须更具体一些。它是如何出现的，它有什么问题，你希望它如何出现。在IE9和IE6I中看起来是一样的。我很可怜那个傻瓜，他要求他的开发人员仍然支持IE6。@John:如上所述，你不能同时从顶部和底部定位某些东西。这是一个完美的编程矛盾。这就好比说你在巴黎的时候在芝加哥，或者你的衬衫需要小一号，同时也要特大号，或者是开灯的时候关灯。这是网络编程，不是量子物理。@Sparky672，@Jawad:

top:0；底部：0

非常有意义。关于这个主题的一篇老文章：@Sparky672:没问题。你不会的

/* START - BASIC CSS */

/* START - CSS Reset */
*
{
margin: 0;
padding: 0;
}

p
{
line-height: 20px;
margin: 20px 0;
}
/* END - CSS Reset */

/* START - div wrapper */
div#wrapper
{
margin: 0 auto;
width: 960px;
border: 1px solid black;
}
/* END - div wrapper */

/* START - hack for "margin: auto" for IE6*/
body
{
text-align: center;
}

div#wrapper
{
text-align: left;
}
/* END - hack for "margin: auto" for IE6*/

/* START - form form1 */
form#form1
{
}
/* END - form form1 */

/* START - div header */
div#header
{
border: 1px solid black;
}
/* END - div header */

/* START - div content */
div#content
{
border: 1px solid black;
height: 500px;

}
/* END - div content */

/* START - div links_panel */
div#links_panel
{
width: 250px;
float: left;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div links_panel */

/* START - div main_panel */
div#main_panel
{
width: 704px;
float: right;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div main_panel */

/* START - div footer_panel */
div#footer_panel
{
clear: both;
border: 1px solid black;
}
/* END - div main_panel */

/* END - BASIC CSS */