IE6中的CSS位置问题

标签 css internet-explorer dhtml internet-explorer-6

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

最佳答案

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

  • 您正在将所有内容放入 <form>元素和一切，我指的是一切，包括页眉、div#masterContent 和页脚。
  • 比起你在使用表格，我不知道为什么。您对表格所做的一切都可以用 div 完成。
  • 你给你 div.masterContent 一个位置:固定顶部:178 像素和底部:42 像素。你熟悉 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位置问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6335386/

上一篇：asp.net - 检测并显示 IE8，然后使用 MVC 3 Razor 显示现有的 IE8 css 样式表

下一篇：javascript - 在 Div 下移动 Gmap

相关文章：

html - 空白 : pre-wrap messes up flexbox layout in IE11

internet-explorer - 如何让 IE 使用关联的应用程序打开文件？

javascript - 谁了解 Windows Phone 上的设备方向？

javascript - 想要 : simple HTML file that does disclosure triangle <div> hide/reveal

javascript - Chart.js V2 格式/样式标签

html - DIV 中的文本卡在底部

html - 有没有办法消除 "<center>...</center>"标签对特定元素的影响？

python - 如何搜索 ZCatalog 对象名称

javascript 和 DHTML 影响

javascript - Twitter 的 typeahead.js 建议没有样式(没有边框、透明背景等)

©2024 IT工具网  联系我们