DIV多层嵌套margin-top的BUG问题


今天在做登录页面的时候发现个margin-top的bug ;

初始代码如下:

html:


复制代码
代码如下:

<div class="logo"></div>
<div class="login_text">
<div id="error" class="errorstyle"></div>
</div>

css:


复制代码
代码如下:

.errorstyle {
height:20px;
width:225px;
background-color:#FFCCCC;
color:#F00;
font-size:12px;
border:#FF0000 solid 1px;
margin-top:10px; /* 注意这里 */
}

结果发现IE6.IE7正常,ie8,FF显示错误。

症结:当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用于父元素。

解决方案:

1、使用浮动来解决,即将子层代码改为:


复制代码
代码如下:

.errorstyle {
height:20px;
width:225px;
background-color:#FFCCCC;
color:#F00;
font-size:12px;
border:#FF0000 solid 1px;
margin-left:90px;
display:inline;
/* 以下代码修正FF和ie8的margin-top bug */
margin-top:10px;
float:left;
}

2、使用padding-top来解决(因为FF盒模型问题,不推荐使用)

OK,一切都好了~

++++++++++++++++++++++++++++++++++++++++++++++++++

PS:

其实这个是一个外边距叠加的问题,恰恰firefox跟ie8中是正确的,而ie6、7之中是错误的,内部容器的margin与外部叠加,叠加的margin处于容器外部。浮动元素不会产生外边距的叠加,所以间接解决了你遇到的问题。



相关阅读:
java中常用工具类之字符串操作类和MD5加密解密类
详解Java编程中线程的挂起、恢复和终止的方法
php批量上传的实现代码
java 解析user-agent 信息
解析Android开发中多点触摸的实现方法
Win10系统无法运行Share EX2提示Are you happy的故障分析及解决方法
如果没有预定Win10升级 还能免费升级Win10吗?
Win10 Mobile/WP8.1优秀专业摄影应用OneShot本周再次更新:修复Bug和优化性能
Windows 10推中国定制版 微软7月29日正式发布
Win10虚拟内存如何关闭?Win10关闭虚拟内存的方法
php无限分类且支持输出树状图的详细介绍
C语言十进制转二进制代码实例
Unity3D获取当前键盘按键及Unity3D鼠标、键盘的基本操作
SQLite教程(一):SQLite数据库介绍
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 我的金兰大哥是一位英勇神武的军人 事事处处严律已 爱岗敬业作奉献(税务) 保护环境演讲稿演讲稿 侯以雷诗歌欣赏208 浅唱你的夏天(23)作文100字 感而发 迷乱的青春 盛夏的星空作文250字 文具盒里的争执作文800字 在BT建设模式中施工阶段项目管理工作探讨 问题的问题700字 河粉 客户祝福短信大全 妈妈“偷菜也疯狂”作文600字 红楼梦里的诗句 红楼梦里最美的诗句 水利委员会五五普法五年规划 小学五年级作文600字:难忘师恩 《机关干部在解放思想中有所作为》心得体会 高中高二作文1000字:沮河里的香菇 小店比大店“大” 相互关爱的作文:人人关爱 借物抒情作文500字 超越那座山600字 今天,是妈妈的生日 保持锐气 小学三年级写观察花的作文:牡丹 能在赢时退场的人,才是真正的赢家。 30岁之前创业成功的12个要点 可爱的猪小能400字 人生似流水作文600字 心态与人生800字 我是否对你太过依赖 小学六年级作文600字:华山小精灵 山顶的自豪 2014扇娘演员表 蓦然之间又一种心痛作文1100字 青春的雨季 个体运输市场的发展趋势及对策分析 题寿安南馆 市文化局财务科优秀公务员个人事迹材料 英文求职信应避免僻词 我爱美丽的秋天——赵晨曦 2011年文化局加强文物普查安排方案 普通话测试说话范文6号《我最尊敬的老师》 浅浅的爱,深深的伤 人生没有白走的路 倪萍姥姥经典台词 优秀支教先进事迹材料 新闻工作者学习党章个人心得体会 看漫画《假文盲》有感作文900字

Copyright © 2016 phpStudy |