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

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

它适用于除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>

来源

2012-06-27 David Jones

你在哪个版本的IE中运行它？ – ply

版本：9.0.8112.16421;更新版本：9.0.7（不知道这是什么意思） –

您是否尝试过添加文档类型声明？

<!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-27 16:14:53 ply

修复它！这太奇怪了。我从来没有理解文档类型声明。我认为开放标签就足够了。谢谢！ –

是的，如果doctype被忽略IE为了向后兼容而回复到quirksmode，但是声明一个应该让它像预期的那样工作。很高兴工作！ – ply

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

回答

相关问题