IE中固定元素和液体元素之间的额外空间答案

【问题标题】：Extra space between fixed and liquid elements in IEIE中固定元素和液体元素之间的额外空间
【发布时间】：2012-06-27 16:00:45
【问题描述】：

我正在设置一个非常简单的固定液体布局。 header 设置为 100%，sidebar 设置为固定宽度并向左浮动，内容区域的宽度没有定义（这样就填满了剩余空间）。

它适用于除 IE 之外的所有浏览器，其中在侧边栏和内容区域之间添加了大约 3 像素的空白。

我无法在 JSFiddle 中重现该问题（即使我复制并粘贴了我的确切代码），因此我附上了图片。第一张图片在 Chrome 中渲染，第二张在 IE9 中渲染。

CSS (styles.css)

body {
    margin: 0px;
}
#header {
    width: 100%;
    height: 150px;
    background: #F00;
}

#sidebar {
    float: left;
    width: 280px;
    height: 1000px;
    background: #0F0;
}

#content {
    height: 1000px;
    background: #00F;
}

HTML

<html>
<head>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
</body>

【问题讨论】：

你在哪个版本的 IE 上运行它？
版本：9.0.8112.16421；更新版本：9.0.7（不确定是什么意思）

标签： html css internet-explorer fixed liquid-layout

【解决方案1】：

您是否尝试过添加 doctype 声明？

<!DOCTYPE html>
  <html lang="en">
    <head>
      <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
      <div id="header"></div>
      <div id="sidebar"></div>
      <div id="content"></div>
    </body>
   </html>

【讨论】：

解决了！这太奇怪了。我从来没有理解过 doctype 声明。我认为打开标记就足够了。谢谢！
是的，如果省略 doctype，IE 将恢复为 quirksmode 以实现向后兼容性，但声明一个应该使其行为符合预期。很高兴它成功了！