时间:2021-05-08
今天在做登录页面的时候发现个margin-top的bug ;
初始代码如下:
html:
css:
结果发现IE6.IE7正常,ie8,FF显示错误。
症结:当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。
解决方案:
1、使用浮动来解决,即将子层代码改为:
2、使用padding-top来解决(因为FF盒模型问题,不推荐使用)
OK,一切都好了~
++++++++++++++++++++++++++++++++++++++++++++++++++
PS:
其实这个是一个外边距叠加的问题,恰恰firefox跟ie8中是正确的,而ie6、7之中是错误的,内部容器的margin与外部叠加,叠加的margin处于容器外部。浮动元素不会产生外边距的叠加,所以间接解决了你遇到的问题。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
实例如下所示:div{overflow:hidden;margin-top:50px;margin-left:500px;}.container{width:2
1.匀速移动代码title*{margin:0;padding:0;}div{margin-top:20px;width:200px;height:100px;
P{margin-top:.6em;margin-bottom:.6em;}BODY{margin-left:0pt;margin-top:0pt;font-s
主要代码:position:absolute;top:50%;left:50%;margin-top:-(height/2);margin-left:-(wid
margin-top是CSS中的一个属性,用于设置元素的上边距,所有主流浏览器都支持margin-top属性。 层叠样式表(英文全称:CascadingSty