是这样的,一个大的盒子里面有两盒子,并成为子left和字right吧,两都是50%的float:left;

<style>

.c {width:887px;height:100px;background:blue;}
.l ,.r{width:50%;float:left;height:50px;background:red;}

</style>

<div class=”c”>

<div class=”l”></div>

<div class=”r”></div>

</div>

预设的效果是类似下面这样的

嗯,你用上面的代码测试下, 没错,在ff,chrome等标准浏览器下面都显示为预想的效果,但是,在ie内核的浏览器下面则出现了偏差,子left和子right出现了错行,没有显示在同一行内,如下

这个,是ie内核对50%的解释问题吧,887px的50%是多少,443.5px,在ie看来,基本单位是1px,0.5px在ie里面被补上了0.5px,于是left和right加起来总共多出了1px,于是超过了父887px的width于是被ie强制换行,如果父节点的width为偶数,比如666px,那么它的50%就是333px,那么最后的渲染效果也会是你的预期,这个是个很小的细节,开发中但是还是要注意下了。

 posted on 2012-03-02 17:04 落叶满长沙 阅读(...) 评论(...) 编辑 收藏