今天在做登录页面的时候发现个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的更多相关文章

  1. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  2. 元素多层嵌套,JS获取问题

    如果一段html嵌套过多,在js中获取还是比较麻烦的,我写了几套方案,大家可以参考参考,如果你有好的方法,也分享出来,让我们瞧瞧. HTML: <!DOCTYPE html> <ht ...

  3. angularjs ui-view多视口多层嵌套路由配置

    最近研究了一下ui-view多层嵌套,整理了一下 1.最简单的ui-view用法 html部分: <ul class="nav navbar-nav"> <li ...

  4. fastjson排序 Map多层嵌套转换自动排序问题终极解决方案

    阅读更多 最近项目中用到了fastjson(1.2.15)需要将前端多层嵌套json转换为map,由于map的无序性,想了很多办法,最终找到使用 Map m= JSONArray.parseObjec ...

  5. C# Mongo DB 修改多层嵌套集合中的字段

    C# Mongo DB 修改嵌套集合中的字段 虽然c#的mongo 驱动很强大,而且还支持linq,但是一些复杂的操作语句还是比较困难 这里我用Bson实现功能 这是模型(我这里有多层嵌套) publ ...

  6. ASP.NET提取多层嵌套json数据的方法

    本文实例讲述了ASP.NET利用第三方类库Newtonsoft.Json提取多层嵌套json数据的方法,具体例子如下. 假设需要提取的json字符串如下: {"name":&quo ...

  7. .net(c#)提取多层嵌套的JSON

    Newtonsoft.Json.Net20.dll 下载请访问http://files.cnblogs.com/hualei/Newtonsoft.Json.Net20.rar 在.net 2.0中提 ...

  8. div中嵌套div水平垂直居中

    div中嵌套一个居中的div有很多方法,如果不想调整边距,有一个简单的方法: <div align="center" style="width: 200px;hei ...

  9. div里嵌套了img底部会有白块问题和图片一像素问题解决

    div里嵌套了img底部会有白块 因为img默认是按基线(baseline)对齐的.对比一下图片和右边的p, q, y等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...

随机推荐

  1. hosts,命令行前面的显示

    1,/etc/hosts,主机名ip配置文件. # Do not remove the following line, or various programs # that require netwo ...

  2. HDU 5348 MZL's endless loop(DFS去奇数度点+欧拉回路)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5348 题目大意:给你一张图,有n个点,和m条无向边,让你把m条无向边变成有向边,使得每个节点的|出度- ...

  3. 认识hasLayout——IE浏览器css bug的一大罪恶根源 (转)

    认识hasLayout--IE浏览器css bug的一大罪恶根源 转 什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要 ...

  4. 洛谷 P1184高手之在一起 题解

    题目传送门 那位高手是谁啊?@jxpxcsh  QWQ. 这道题数据特别水,所以直接使用O(n*m),每读进一个m内的字符串,就扫一遍n的字符串.但注意地点字符串中有可能会有空格,所以这时候就要请出g ...

  5. MVC – 15.路由机制

    15.1.路由检测插件 - RouteDebug 15.2.路由约束 15.3.命名路由 15.4.验证码 15.5.ASP.NET MVC 与 三层架构 15.6.Area区域 15.6.1.尝试将 ...

  6. vue 子父组件之间的通信,及在调用组件的地方

    这里是用了 element ui 你们也可以看一下管方的文档 http://element.eleme.io/#/zh-CN/component/installation 组件html <div ...

  7. 【PAT】1010. 一元多项式求导 (25)

    1010. 一元多项式求导 (25) 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式:以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数 ...

  8. python 函数操作

    四.函数 定义: #!/usr/local/env python3 ''' Author:@南非波波 Blog:http://www.cnblogs.com/songqingbo/ E-mail:qi ...

  9. 性能测试常用的linux命令

    性能测试常用的linux命令 linux测试nginx64bitredhatlighttpd 查看日志    awk '$4 ~/^\[27\/Nov\/2008:15:2[0-5]/ {print ...

  10. ASP.NET MVC 3和Razor中的@helper

    ASP.NET MVC 3支持一项名为“Razor”的新视图引擎选项(除了继续支持/加强现有的.aspx视图引擎外).当编写一个视图模板时,Razor将所需的字符和击键数减少到最小,并保证一个快速.通 ...