css实践中遇到的问题_html/css_WEB-ITnose

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;}

 

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

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