当前位置：首页 → 问答吧 → 类似淘宝首页的margin-left:-100%布局如何兼容IE6

类似淘宝首页的margin-left:-100%布局如何兼容IE6

时间：2011-10-12

来源：互联网

CSS代码如下：
.wrap {width:960px; margin:0 auto;}
.center {float:left; width:100%; background:#ccc;}
.left {float:left; margin-left:-100%; width:170px; background:#eee;}
.box { margin-left:180px}

DIV布局如下：
<div class="wrap">
<div class="center">
<div class="box">
</div>
</div>
<div class="left">
</div>
</div>
在IE7，8和FF下显示没问题，但是在IE6下显示，左边的侧栏就不知道跑哪去了

作者: longking09 发布时间: 2011-10-12

好像只能先回复内容再进行插下代码神马的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>blueidea</title> <style type="text/css"> .wrap {width:960px; margin:0 auto; background:#f0f0f0;} .center {float:left; width:100%; height:400px; background:#ccc;} .left {float:left; margin-left:-170px; width:170px; height:300px; background:#eee;} .box { margin-left:180px} </style> </head> <body> <div class="wrap"> <div class="center"> <div class="box"> </div> </div> <div class="left"> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: juice9958 发布时间: 2011-10-12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>blueidea</title> <style type="text/css"> .wrap {width:960px; margin:0 auto; background:#f0f0f0;} .center {float:left; width:100%; height:400px; background:#ccc;} .left {float:left; margin-left:-100%; width:170px; height:300px; background:#eee;} .box { margin-left:180px; height:360px; background:#999;} </style> </head> <body> <div class="wrap"> <div class="center"> <div class="box"></div> </div> <div class="left"> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

还是不明白这个问题出在了哪，我是希望<div class="left">的那个DIV浮动到左边去，IE7,8和火狐下显示是正常的，但是在IE6下就不能正常显示

作者: longking09 发布时间: 2011-10-12