filter神奇解决IE 6下负margin:-100%时布局问题

下面一个比较常见的三列布局:

mark up:

<div id="wrap" >
	<div id="main">
    	<div id="body"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
</div>

CSS:

*{margin:0;padding:0;}
html,body{ height:100%;}
#wrap{ width:80%;overflow:hidden; margin:0 auto; height:100%; background:#CCC;}
#main{ float:left; width:100%; height:100%;}
#body{ margin:0 210px; background:#069; height:100%;}
#left,#right{ float:left; width:200px; height:100%;}
#left{ background:#939; margin-left:-100%;filter:;}
#right{ background:#CC9; margin-left:-200px; }

  注意倒数第二个CSS规则(即倒数第一个#left),用了一个空的filter完美解决了IE6下margin-left:-100%计算不正确。不知道诡异的IE6是怎么计算这个百分比负margin的,我用过pixelLeft方法试图把这-100%转化成绝对值,输出的结果跟出现在屏幕上的位置不相符。猜想IE 6下margin的计算和left的计算不是用一个参照box。偶然用opacity时,发现在IE6下神奇的将上面的问题给解决了,经过测试发现只要有一个filter申明就能解决此问题,无论值为何。

  有知道本源的侠士,还望不吝相告。:)

posted @ 2011-09-25 19:46  only sea  阅读(336)  评论(0编辑  收藏  举报