css兼容性案例：margin-top在IE6/7下失效

又到了利用碎片学习的时间了，看看这个兼容性的小案例，前端开发者经常遇到的问题:margin-top在IE6/7下失效。

一个块级元素，触发了hasLayout（比如设置了宽度高度），并且其前面紧挨着的同级的节点如果为absolute绝对定位，就会导致这个块级元素在IE6/IE7下面的margin-top失效，看起来就像margin-top:0一样。

正常浏览器：

在IE6/7下的效果：

原因是：序号那一栏被顶上去了，原因是“猜冠军”是绝对定位。

解决办法有以下：

1.使用padding来代替margin，比如设置其父元素的padding-top，或者设置这个块元素的padding-top，不过要注意padding对其背景的影响。（这个方法还是治标不治本）。

2.使这个块不直接跟在前面的这个绝对定位元素后面，比如在它们之间插入一个空div标签。

3.交换这两个标签的前后位置。

前端爱好者们约定，阅读后：

if（‘觉得有用’）

｛

分享给朋友（‘I get it！’）;

｝

else if（‘已了解’）

｛

分享给朋友（‘a piece of cake！’）;

｝

else if('看不懂')

{

回复小编（'help me!'）;

}

css兼容性案例：margin-top在IE6/7下失效相关推荐

DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
IE6/7/8 CSS兼容性问题和解决方法汇总
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
CSS兼容性（IE和Firefox）技巧大全
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法把以前兼容IE6.7学习的东西搬出来了,还以为不见了.兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间 ...
CSS兼容性技巧整理－－从IE6-IE9 火狐谷歌浏览器兼容
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTY ...
CSS兼容性技巧整理从IE6-IE9 火狐谷歌浏览器兼容
CSS样式表对浏览器的兼容性问题有时让人很头疼,不过当我们了解了其中的原理与技巧,就会觉得轻松一些.本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧请 ...
处理CSS兼容性的几个实用方式。
今天我们来聊一聊「如何处理CSS兼容性所带来的问题.」因为浏览器厂商众多,采用的浏览器内核各不相同,所以对CSS语法支持的程度也各不相同. 有的可能是语法不支持,有的可能是语法支持但是效果表现形态不 ...
div+css兼容性
SS 兼容要点:DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text- ...
CSS 外补白(Margin) 内补白(Padding) 边框属性定位（positioning）属性布局(layout)属性
CSS 布局(Layout) Properties 属性 CSS Version 版本 Inherit From Parent 继承性 Description 简介 display CSS1/CSS2 ...

css兼容性案例：margin-top在IE6/7下失效

css兼容性案例：margin-top在IE6/7下失效相关推荐

最新文章

热门文章