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申明就能解决此问题,无论值为何。
有知道本源的侠士,还望不吝相告。:)