css实践中遇到的问题

webkit浏览器中缩放低于100%浮动布局错乱?

如:1200宽度:内容宽度(400-20-2)*3个+内边距宽度0+边框宽度1px*2边+外边距宽度10px*2边

<div class="div1">
	<div class="div2">
		<li class="li"></li>
		<li class="li"></li>
		<li class="li3"></li>
	</div>
</div>

 

.div2 {
    width: 1200px;
    border: 1px solid #ddd;
}
.li {
    float: left;
    width: 378px;
    height: 40px;
    line-height: 40px;
    margin: 10px;
    border: 1px solid #ddd;
}
.li3 {
    float: right;
    width: 31%;
    height: 40px;
    line-height: 40px;
    margin: 10px;
    border: 1px solid #ddd;
}
/*或者*/
.div2 {
　　position: relative;
}
.li3 {
　　position: absolute;
　　right: 0;
　　width: 378px;
    height: 40px;
    line-height: 40px;
    margin: 10px;
    border: 1px solid #ddd;

 

 

 问题所在:在-webket内核浏览器中会出现,但ie中并没有这种情况,由于边框的宽度在缩放中都是1px,低于100%进行缩小的时候第三个float会被挤到下一层

解决办法:如以上代码,给第三个框设置百分比,百分比可以这样取值378/1200=31.5% 经测试取值31%才可以!