IE7和固定的div问题答案

【问题标题】：IE7 and fixed divs problemIE7和固定的div问题
【发布时间】：2009-08-04 16:27:20
【问题描述】：

背景

我需要使用固定的 DIV 为客户做一个相当复杂的布局。在 IE8、FF3 和 Chrome 中一切都很好，但 IE7 破坏了所有的东西

编辑：固定的 DIV 是必须的，只有内容 DIV 必须滚动（这是规范，抱歉）

HTML 和 CSS 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="position: fixed; width: 185px;  height: 600px;  top: 10px;  border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 680px; float: left; background: white; margin-left: 185px;  min-height: 600px;  border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 


</body>
</html>

宽度 IE8、FF3 和 Chrome

IE8, FF3 and Chrome http://img39.imageshack.us/img39/406/firefoxkpd.jpg

宽度 IE7

IE7 http://img23.imageshack.us/img23/1315/ie7l.jpg

注意事项

我并不担心 IE6，因为我知道它不支持 Fixed 元素，但如果你知道如何修复它，那就太好了！

问题

我应该了解哪些 IE7 错误才能解决问题？
如何相对于包装器引用标题列中的左侧
为什么标题栏向右，而右边栏消失了？

【问题讨论】：

标签： css layout fixed incompatibility

【解决方案1】：

找到了解决方法！奇怪的是，将内容浮动到right 修复了它！
我能赚到饼干吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="position: fixed; width: 185px; height: 600px;   top: 10px; border: 1px solid blue;">
      header
    </div>

    <div id="content" style="float: right; width: 680px; margin-right: 90px; height: 600px; border: 1px solid lime;">
        content
    </div>    

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 90px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>


</div> 


</body>
</html>

【讨论】：

【解决方案2】：

这个呢：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="float: left; width: 185px;  height: 600px;      top: 10px;      border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 650px; float: left; background: white; left: 185px;  min-height: 600px; height: 600px;      border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="float: left; top: 10px; width: 90px; left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 
</body>
</html>

它适用于 IE7、Firefox、Opera、Safari 和 Chrome。我想它也适用于 IE6 和 IE8。我不得不减小“内容”的宽度，因为 (rightcolumn+content+header)

【讨论】：

我没有使用“固定”的 div，但我想它不是必须的。是吗？
您的解决方案未能正确呈现。我在运行 IE7 的 24" 显示器上尝试过。右侧有一个额外的列。
这不是一个额外的右列，它是比所有子 div 都大的包装器。 (185+650+90)=925 > 960

【解决方案3】：

固定位置在旧版浏览器中不起作用。您可以将元素并排浮动。

还为正文指定零填充，Opera 使用默认填充而不是边距（实际上更有意义）。

我将样式放在样式表中以使代码更简洁：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>

<style type="text/css">
body { margin: 10px; padding: 0; }
#wrapper { width: 960px; margin: 0 auto; border: 1px solid red; overflow: hidden; }
#header { float: left; width: 185px; height: 600px; border: 1px solid blue; }
#content { float: left; width: 680px; background: white; min-height: 600px; border: 1px solid lime; }
#rightcolumn { float: left; width: 89px; height: 600px; border: 1px solid maroon; }
</style>

</head>
<body>

<div id="wrapper">
   <div id="header">
      header
   </div>
   <div id="content">
      content
   </div>
   <div id="rightcolumn">
      right
   </div>
</div> 

</body>
</html>

【讨论】：

问题出在 fixed 列上。我不认为 IE7 是“旧版浏览器”，它支持固定 div（或者至少手册上是这么说的）

【解决方案4】：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>
    test
</title>

    <!--[if lt IE 8]>

    <![endif]--> 

    <!--[if lt IE 7]>

    <![endif]--> 

</head>

<body style="margin: 10px;">
<div id="wrapper" style="width: 960px; margin: 0 auto; position: relative;  border: 1px solid red; overflow: hidden;">

    <div id="header" style="width: 185px; float: left;  height: 600px;      top: 10px;      border: 1px solid blue;">
      header
    </div>

    <div id="content" style="width: 680px; float: center; background: white; margin-left: 185px;  min-height: 600px;      border: 1px solid lime;">
        content
    </div>

    <div id="rightcolumn" style="position: fixed; top: 10px; width: 95px; margin-left: 865px;   height: 600px;border: 1px solid maroon;">
        right
    </div>

</div> 


</body>
</html>

应该这样做！

【讨论】：

【解决方案5】：

如果基于脚本的解决方案是可以接受的，那么我已经使用 Dean Edwards 的upgrade scripts 修复了 div（不一定使用您拥有的布局）取得了一些成功，该补丁 IE 行为更像标准指示。

【讨论】：

我试过了，但是不行。问题是据称IE7支持Fixed DIV，但不知道如何将标题保留在左侧，将右列保留在右侧。