题

背景

我需要做一个相当复杂的布局的一个客户，利用固定DIV。一切都是现在IE8，FF3和铬，但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和铬

IE8，FF3和铬http://img39.imageshack.us/img39/406/firefoxkpd.jpg

宽IE7

IE7http://img23.imageshack.us/img23/1315/ie7l.jpg

注意到

我不那么担心IE6因为我知道它不支持 Fixed 元素，但是如果你知道如何解决这个问题，伟大的！

的问题

  1. 我应该知道的关于IE7错误来解决这个问题？
  2. 我如何可以参考该留在标题列相对于包装
  3. 为什么头柱的正确及适列消失了?
有帮助吗？

解决方案

找到一个解决!! 奇怪的浮动的内容 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>

其他提示

这是什么:

<!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，火狐，歌剧，动物园和铬。我猜它会在IE6和IE8。我不得不减少的宽度的"内容"，因为(rightcolumn+内容+头) < 包装纸

位置固定不工作的老年浏览器。你可以浮动元素在彼此身边.

指定一个零填充的身体还有，歌剧院采用了默认的填充，而不是保证金(这实际上使更多的意义上)。

我把风格样式表做出的代码清洁：

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

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

这应该这样做！

如果剧本为基础的解决方案是可接受的，那么我们取得了一些成功，与固定div(不一定使用的布局，你有)使用Dean Edwards 升级的脚本 它补即行为以更像标准的指示。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top