IE6中的CSS位置问题

如何解决IE6中的CSS位置问题

| 我有一些带有页眉，页脚，左侧菜单窗格和内容的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>

解决方法

这是一个非常奇怪的设计，我确实看到了一些奇怪的设计。您将所有内容都放在<form>元素中，所有内容，包括标题，div＃masterContent和页脚，均指所有内容。比起您正在使用表格，我不知道为什么。您对表格所做的一切都可以通过div完成。您给div.masterContent一个位置：顶部固定为178px，底部固定为42px。您是否熟悉CSS中的定位概念？当您为任何元素赋予固定位置时，无论您向下滚动，该元素都会保留在屏幕上。那就是您想要的，如果您想要的话，我无法想象它将是什么样的页面。您正在为div.linksPanel提供一个绝对位置，顶部为0，底部为0，左侧为10px。正如我所说，这毫无意义。怎么从顶部开始是0，从底部开始是0。通过使用左上，右上或左下，右下设置这些偏移属性。您的div.mainPanel存在相同的问题。我认为，要么您完全误解了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>

使用以下CSS

/* 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 */

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

IE6中的CSS位置问题

如何解决IE6中的CSS位置问题

解决方法

相关推荐