ie7 absolute 高度塌陷
ie8以及以上版本中此段代码是我要达到的效果，但是ie7不知何故导致了left，right类的高度塌陷。求高手解答。怎样兼容ie7
<!DOCTYPE html><html><head> <title></title><style type="text/css">.content{ position: absolute; top: 20px; bottom: 20px; background-color: #eee; left: 0; right: 0;}.left{ height: 100%; width: 40%; float: left; position: relative; background-color: #888;}.right{ position: relative; height: 100%; width: 60%; float: left; background-color: #666;}.img{ width: 100px; background-color: red; height: 200px; float: right; position: relative; top: 50%; margin-top: -100px;}.detail{ width: 300px; height: 300px; float: left; position: relative; top: 50%; margin-top: -150px; background-color: green;}.clearfix{ *zoom: 1;}.clearfix:after,.content-style:after{ clear: both; content: "20"; visibility: hidden; height: 0; display: block;}</style></head><body> <div class="content clearfix"> <div class="left clearfix"> <div class="img"></div> </div> <div class="right clearfix"> <div class="detail"></div> </div> </div></body></html> 忘记粘贴代码了 代码在此：
<!DOCTYPE html><html><head> <title></title><style type="text/css">.content{ position: absolute; top: 20px; bottom: 20px; background-color: #eee; left: 0; right: 0;}.left{ height: 100%; width: 40%; float: left; position: relative; background-color: #888;}.right{ position: relative; height: 100%; width: 60%; float: left; background-color: #666;}.img{ width: 100px; background-color: red; height: 200px; float: right; position: relative; top: 50%; margin-top: -100px;}.detail{ width: 300px; height: 300px; float: left; position: relative; top: 50%; margin-top: -150px; background-color: green;}.clearfix{ *zoom: 1;}.clearfix:after,.content-style:after{ clear: both; content: "20"; visibility: hidden; height: 0; display: block;}</style></head><body> <div class="content clearfix"> <div class="left clearfix"> <div class="img"></div> </div> <div class="right clearfix"> <div class="detail"></div> </div> </div></body></html>你这height:100%在ie7下貌似没用，要不用js吧
浏览器的问题，这没办法，找个代替方案吧
