Question

我正在建立一个非常简单的固定液体布局。标题设置为100％，侧边栏设置为固定宽度并浮动到左侧，内容区域的宽度未定义（以便填充剩余空间）。

除了IE之外，它在每个浏览器中运行良好，其中在侧边栏和内容区域之间添加了大约3个像素的空白区域。

我无法在JSFiddle中重现这个问题（即使我复制并粘贴了我的确切代码），所以我添加了图像。第一张图片在Chrome中呈现，第二张图片在IE9中呈现。

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>

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

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

1 个答案: