css margin重叠的问题
来源:互联网 发布:七号淘宝外设店 编辑:程序博客网 时间:2024/05/16 07:28
margin:20px;
margin:20px;
重叠:蓝色的上20边距与灰色背景div的20上边距重叠;蓝色方块的下20像素边距与红色方块的上20像素布局重叠;红色方块的20像素的下边距与灰色盒子的20像素下边距重叠。
由于IE浏览器和非IE浏览器两大阵营对处理margin重叠问题上有较大差异,所以解决margin重叠问题一般是没有什么兼容性的好方法的。一般而言,想这里同向重叠异向重叠的情况同时出现还是比较少见的。在实际项目中遇到重叠只是一部分的重叠。重叠有利有弊,关键是你要了解什么情况下会发生margin重叠,深刻理解它,这样当你不希望发生重叠的时候可以避免出现重叠,希望利用这种重叠属性的就利用它,正所谓,知己知彼,百战百胜。
下面提出了些margin重叠的解决方案,但是这些方案都是有缺陷了,在IE浏览器和非IE浏览器下的表现是不一致的。这里仅供参考,拓展思路和理解,您可以想想更加好的解决方法。我个人观点认为最好的解决margin重叠的方法就是认识它,避免它!
margin:20px; float:left;
margin:20px; clear:both;
单个方块重叠的解决方法:1.浮动。在IE浏览器下(IE8未测过),浮动可以解决margin-top以及margin-bottom重叠的问题。而在Firefox火狐浏览器或是chrome谷歌浏览器下以及opera浏览器下,浮动只能解决同方向上的margin重叠问题。不同方向上的margin重叠的问题依旧存在。
同方向margin重叠的解决方法:1.与清除浮动的方法一致,给外部的box添加清除浮动相同的样式即可。常用的样式代码为:overflow:hidden; zoom:1;但是有问题的是,在IE浏览器下(未测试IE8),应用zoom属性后,似乎发生了水平方向上margin失效的情况。其他表现均一致。
margin:20px; 父标签padding:1px;
margin:20px; 父标签padding:1px;
同方向margin重叠的解决方法:2.增加些边缘属性。例如padding值,padding:1px;或是border属性,border:1px solid #cacbcc。此方法在非IE浏览器下效果良好,但是在IE浏览器下,表现很糟糕。
- css margin重叠的问题
- CSS的margin重叠问题
- css的margin重叠问题
- css margin重叠的问题
- CSS margin重叠问题
- margin重叠的问题
- margin重叠问题的解决方案
- css margin重叠
- css margin 重叠
- 忽略的问题——margin重叠
- 关于margin上下重叠的问题
- 相邻元素的 margin-top重叠问题
- margin重叠问题
- margin top重叠问题
- margin上下重叠问题
- CSS:margin重叠-父子关系
- css之Margin重叠现象
- CSS:margin重叠-父子关系
- android 进程的五个等级
- 2D-3D Fusion for Layer Dempositon of Urban Facades
- StateServer 解决 Session过期和分布式保存Session
- ArcGIS Engine开发的ArcGIS 版本管理的功能
- javascript常用函数大全 + javascript事半功倍/速成系列 + javascript技巧
- css margin重叠的问题
- pthread_cond_signal和pthread_cond_wait简介
- linux各文件夹的作用
- 文本控件:TextView与EditText
- Android Dialog 设置透明 .
- ServiceMix - [Quickstart]4.添加ActiveMQ
- Acegi是Spring Framework 下最成熟的安全系统,它提供了强大灵活的企业级安全服务
- 不公平的社会
- maven-antrun-plugin