(注意，这不是双边距漏洞。我目前称之为双垂直内边距漏洞，除非有人给它取一个更聪明/有文献支持的名称？)
就在我以为我已经见过所有奇怪的IE CSS漏洞时，我做了一个简单的测试用例，继续困扰着我。以下页面在Firefox、Opera等浏览器中看起来和运行良好。然而，IE 6和IE 7似乎感到困惑。接下来是我要复制粘贴的文档。
编辑：我把这个放在以下网址：http://jsbin.com/efele
在IE和FF中打开并进行比较。
我的问题是：这个漏洞叫什么名字？（我错过了哪里吗？在这个页面上可以找到吗？）我熟悉3像素跳动漏洞和双（水平）边距漏洞和许多其他与浮动相关的漏洞。但是... 垂直内边距被复制了？（并且放在错误的位置。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE bork!</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
#container {
border:1px solid red;
background-color:#CC99CC;
width:800px;
margin:0 auto;
padding-top:100px;
}
#sidebar {
float:left;
display:inline;
width:200px;
border:1px solid blue;
background-color:#00CCFF;
}
#content {
float:right;
display:inline;
width:510px;
border:1px solid green;
background-color:#66CC99;
}
.clear {
clear:both;
/* height:0px; <<< setting height seems to be the only thing that makes this work as expected?!? */
background-color:#CCCCCC; /* bg color here is just for debugging */
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">I am the sidebar</div>
<div id="content">I am the content</div>
<div class="clear"><!-- clear! --></div>
</div>
<p>There should be 100px of space above the two floats, but <em>no</em> space below them...</p>
</body>
</html>
顺便说一下，我最终确实想出了如何让IE满意的方法。解决方案（在“clear” div上明确设置高度）已被注释以显示错误。我只希望我能够重新拥有过去几个小时，这些时间用来发现真正的问题/解决方案！
谢谢！