布局的时候貌似发现ie对百分比的宽度计算有点问题,Google之。果然。。。
http://www.liehuo.net/a/200908/237911.html 写道
IE与firefox对百分比宽度解析存在细小差异,假设一个DIV宽度800px。里面有8个字DIV等宽依次浮动,可以这么写。
以下为引用的内容:
.out{width:777px;}
.out .in{width:12.5%; height:20px; float:left;}
html代码:
以下为引用的内容:
<div class="out">
<div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div>
</div>
照我们的理解:12.5% * 8正好为100%嘛!所以内部8个DIV的宽度一起浮动总宽度应该正好等于外部DIV的宽度的。
ok,想法毕竟是想法,而事实上:火狐下是这样子,但是IE,不好意思,不是这样的。
这里我没有计算,数据或许有不准,但是原理是实践过滴。
IE算百分比的时候完全取整的。
777px*12.5%=97.125
IE会取整,于是为97px,8个累加就是776px,结果总长少了1px。
同样的,如果外部DIV宽度为772,则
772 * 12.5%=96.5px,取97px,结果776px,总长长了4px。
这是我在写自适应页面时遇到的一个比较头疼的问题。问题原因是知道了,如何解决还没有想到很好的方法。
firefox下表现很好。IE,叹息!
以下为引用的内容:
.out{width:777px;}
.out .in{width:12.5%; height:20px; float:left;}
html代码:
以下为引用的内容:
<div class="out">
<div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div><div class="in"></div>
</div>
照我们的理解:12.5% * 8正好为100%嘛!所以内部8个DIV的宽度一起浮动总宽度应该正好等于外部DIV的宽度的。
ok,想法毕竟是想法,而事实上:火狐下是这样子,但是IE,不好意思,不是这样的。
这里我没有计算,数据或许有不准,但是原理是实践过滴。
IE算百分比的时候完全取整的。
777px*12.5%=97.125
IE会取整,于是为97px,8个累加就是776px,结果总长少了1px。
同样的,如果外部DIV宽度为772,则
772 * 12.5%=96.5px,取97px,结果776px,总长长了4px。
这是我在写自适应页面时遇到的一个比较头疼的问题。问题原因是知道了,如何解决还没有想到很好的方法。
firefox下表现很好。IE,叹息!