笔记2
margin在垂直取值的时候是重叠的,如果上下盒模型分别都有margin,那么取较大值。这一点是值得大家注意的了,平时如果在上下两个容器都设置了margin时,注意垂直取值时并不是两个值相加,而是取较大值。
这是IE6的双边距BUG。当满足下面这三个条件时,就会出现这个BUG:
1、要为块状元素;
2、要左侧浮动;
3、要有左外边距(margin-left)。
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说,并不是只有块状元素左浮动,且具有左外边距时才有这个BUG,当一个盒子右浮动的同时有一个向右的margin-right的时候,IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了,而且都有同方向的margin,则只有最靠近浮动方向的元素有双边距bug。
解决这个bug有两个方法:
1.给float的元素添加一个display:inline
2.给ie6写一个hack,其值是正常值的一半,即_margin-right:10px;这个方法不推荐,因为要加hack写法,而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。
posted on 2017-05-17 22:43 zahngjiaxin 阅读(79) 评论(0) 编辑 收藏 举报