0

我正在设置一个非常简单的固定液体布局。header 设置为 100%，sidebar 设置为固定宽度并浮动到左侧，内容区域的宽度未定义（使其填满剩余空间）。

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

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

铬合金 IE9


CSS (样式.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>

4

1 回答 1

2

您是否尝试过添加 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>
于 2012-06-27T16:14:53.193 回答