IE6中CSS位置问题

发布于 2024-11-15 00:34:31 字数 5676 浏览 0 评论 0原文

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

原文

I have some CSS code with a header, footer, left menu pane, and content. The layout is working on all browsers except IE6. In IE6 the linksPanel div does not render correctly within the masterContent div. I believe it has something to do with the position element. I've looked at a bunch of articles but have not been able to find a solution that works. Unfortunately I have to support IE6 and need a solution. Code is below. Any help would be greatly appreciated!

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小兔几 2024-11-22 00:34:31

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

您将所有内容放入
元素中，我所说的所有内容是指包括页眉、div#masterContent 和页脚在内的所有内容。
比你使用表格，我不知道为什么。您对表格所做的一切都可以用 div 完成。
您为 div.masterContent 提供了一个位置：固定，顶部：178px，底部：42px。你熟悉CSS中的定位概念吗？当您为任何元素指定固定位置时，无论您是否向下滚动，该元素都会保留在屏幕上。这就是你想要的吗？如果你想要的话，我无法想象这会是一个什么样的页面。
您为 div.linksPanel 指定了绝对位置，顶部：0，底部：0，左侧：10px。正如我所说，这无论如何都没有意义。怎么可能从上往下都是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 */

基本上你需要一个标题，后面是左侧的 linkspanel，它应该有一个滚动条，然后是一个 mainPanel，它也应该有一个滚动条，它必须位于 linksPanle 的右侧，最后是一个 fotter 。

This is a very strange design and I have seen some strange designs indeed.

You are putting everthing in a <form> element and by everything, I mean everything including the header, div#masterContent and footer.
Than you are using tables and I have no idea why. Everying that you have done with tables can be done with divs.
You are giving you div.masterContent a position:fixed with a top:178px and bottom: 42px. Are you familiar with the positioning concepts in CSS? When you give any element a position of fixed, that element remains on the screen regardless if you scroll down. Is that what you want, and if you do, I can not imagine what kind of a page it will be.
You are giving your div.linksPanel a position of absolute with a top: 0, bottom: 0 and left: 10px. As i said this does not make sense in any way. How can it be 0 from the top as well as 0 from the bottom. These offset properties are set by using top-left, top-right or bottom-left, bottom-right.
Your div.mainPanel has the same issues.

I think, either you have totally missunderstood CSS Positioning and Layouts, or I have utterly failed to understand it. Maybe this is what you are looking for.

<!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>

With the following 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 */

Basically you want a header, followed by a linkspanel on the left which should have a scroolbar, followed by a mainPanel which should also have a scroolbar and it has to be to the right of the linksPanle and lastly followed by a fotter.

回复收藏 0 原文

~没有更多了~