css - IE7 和固定的 div 问题

标签 css layout fixed incompatibility

背景

我需要为客户端做一个相当复杂的布局,使用固定的 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 元素,但如果您知道如何修复它,那就太好了!

问题

  1. 我应该了解有关 IE7 错误的哪些信息才能解决问题?
  2. 如何相对于包装器引用标题列中的左侧
  3. 为什么标题列向右移动而右列消失了?

最佳答案

找到修复方法!! 奇怪的是将内容 float 到右侧修复了它!
我能赚到一 block cookies 吗?

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

关于css - IE7 和固定的 div 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1228536/

相关文章:

javascript - 文本淡入淡出循环页面加载后?

html - 缩小浏览器后如何使 Bootstrap 导航栏稳定

layout - 网页界面 : What is a good way to display many static fields?

android - 背景附件:fixed not working

Android ListActivity - 固定页眉和页脚

css - 允许站点内容在固定定位元素下方滚动

html - Bootstrap 主页对齐问题

html - 为什么这两个按钮渲染不同

html - 如何在html中制作一个 "wrappanel"?

html - 对齐背景图像