ie内核和标准浏览器间对width:50%的差异解读

30 六月 2010 By nick 2 In css

是这样的，一个大的盒子里面有两盒子，并成为子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>

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

嗯，你用上面的代码测试下，没错，在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，那么最后的渲染效果也会是你的预期，这个是个很小的细节，开发中但是还是要注意下了。

Trackback URL