有如下结构<!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>
<style type="text/css">
#warp{background-color:red;width:100%;height:500px;}
#left{background-color:blue;float:left;width:20px;height:100%;}
#right{background-color:green;float:right;width:20px;height:100%}
#mid{width:100%;background-color:yellow;height:100px;}
</style>
</head>
<body>
<div id="warp">
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
</div>
</body>
</html>
在IE7下，运行正常
但在IE6下，黄色的Mid区域会跑到整个div的下面
请问如何解决这两个版本的兼容问题
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style type="text/css">
#warp{background-color:red;width:100%;height:500px;}
#left{background-color:blue;float:left;width:20px;height:100%;}
#right{background-color:green;float:right;width:20px;height:100%}
#mid{width:100%;background-color:yellow;height:100px;}
</style>
</head>
<body>
<div id="warp">
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
</div>
</body>
</html>
在IE7下，运行正常
但在IE6下，黄色的Mid区域会跑到整个div的下面
请问如何解决这两个版本的兼容问题
<!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>
<style type="text/css">
#warp{background-color:red;width:100%;height:500px;}
#left{background-color:blue;float:left;width:20px;height:100%;margin-right:-20px;}
#right{background-color:green;float:right;width:20px;height:100%;margin-left:-20px;}
#mid{background-color:yellow;height:100px;margin:0 20px 0 20px;}
</style>
</head>
<body>
<div id="warp">
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
</div>
</body>
</html>
相邻元素的边距会重叠，但是 定位/浮动 的元素不会跑
两个元素之间有 内容/border/pading/margin，也不会跑