码迷,mamicode.com
首页 > Web开发 > 详细

css实践中遇到的问题

时间:2016-04-11 13:59:25      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:

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%才可以!

css实践中遇到的问题

标签:

原文地址:http://www.cnblogs.com/hedonglin/p/5376896.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!