关于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,一切都好了~
其实这个是一个外边距叠加的问题,恰恰firefox跟ie8中是正确的,而ie6、7之中是错误的,内部容器的margin与外部叠加,叠加的margin处于容器外部。浮动元素不会产生外边距的叠加,所以间接解决了你遇到的问题。可
参照文章http://www.52css.com/article.asp?id=1018
关于DIV多层嵌套的margin-top的BUG的更多相关文章
- 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head> <meta charset="UT ...
- 元素多层嵌套,JS获取问题
如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: <!DOCTYPE html> <ht ...
- angularjs ui-view多视口多层嵌套路由配置
最近研究了一下ui-view多层嵌套,整理了一下 1.最简单的ui-view用法 html部分: <ul class="nav navbar-nav"> <li ...
- fastjson排序 Map多层嵌套转换自动排序问题终极解决方案
阅读更多 最近项目中用到了fastjson(1.2.15)需要将前端多层嵌套json转换为map,由于map的无序性,想了很多办法,最终找到使用 Map m= JSONArray.parseObjec ...
- C# Mongo DB 修改多层嵌套集合中的字段
C# Mongo DB 修改嵌套集合中的字段 虽然c#的mongo 驱动很强大,而且还支持linq,但是一些复杂的操作语句还是比较困难 这里我用Bson实现功能 这是模型(我这里有多层嵌套) publ ...
- ASP.NET提取多层嵌套json数据的方法
本文实例讲述了ASP.NET利用第三方类库Newtonsoft.Json提取多层嵌套json数据的方法,具体例子如下. 假设需要提取的json字符串如下: {"name":&quo ...
- .net(c#)提取多层嵌套的JSON
Newtonsoft.Json.Net20.dll 下载请访问http://files.cnblogs.com/hualei/Newtonsoft.Json.Net20.rar 在.net 2.0中提 ...
- div中嵌套div水平垂直居中
div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...
- div里嵌套了img底部会有白块问题和图片一像素问题解决
div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...
随机推荐
- ACM——【百练习题备忘录】
1. 在做百练2807题:两倍时,错将判断语句写成 a/b ==2,正确写法是:a == b*2 因为C/C++int型做除法时自动舍入,如:5/2 == 2,但是 5 =/= 2*2. 2. 在做百 ...
- Linux下如何创建新用户
Linux下如何创建新用户 Linux系统中,只有root用户有创建其他用户的权限.创建过程如下: useradd -d /home/newuser newuser(设定了该用户的主目录和用户名) ...
- POJ 2186 Popular cows(Kosaraju+强联通分量模板)
题目链接:http://poj.org/problem?id=2186 题目大意:给定N头牛和M个有序对(A,B),(A,B)表示A牛认为B牛是红人,该关系具有传递性,如果牛A认为牛B是红人,牛B认为 ...
- HDU 2066 一个人的旅行(dijkstra水题+判重边)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2066 题目大意:输入数据有多组,每组的第一行是三个整数T,S和D,表示有T条路,和草儿家相邻的城市的有 ...
- python爬取网易云音乐歌单音乐
在网易云音乐中第一页歌单的url:http://music.163.com/#/discover/playlist/ 依次第二页:http://music.163.com/#/discover/pla ...
- Funny Car Racing(最短路变形)
描述 There is a funny car racing in a city with n junctions and m directed roads. The funny part is: e ...
- CSS3绘图与动画
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 1.CSS3-2D转换属性:trans ...
- [你必须知道的.NET]第二十一回:认识全面的null
发布日期:2008.7.31 作者:Anytao © 2008 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. 说在,开篇之前 null.nullable.??运算符.null ...
- Mybatis异常处理之MySQL Connector Java] will not be managed by Spring
很长时间没写后台代码有点生疏了,这不今天又出点小插曲,写个文章记录下. 由于要上传点数据到后台,顺手整了个mybatis+springmvc.在保存数据时出现了异常. Creating a new S ...
- 爱奇艺全国高校算法大赛初赛C
区间$dp$. 倒着考虑这件事件,肯定有最后一个取走的数字,假设是$a[k]$,那么最后一次取走的价值肯定是$a[0]*a[k]*a[n+1]$,之前取走的价值和为$[1,k-1]$的价值加上$[k+ ...