关于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等字母,你会发现这三个字母的“小尾巴”和图片下方的空白一样高.下面这张图中的黑线就 ...
随机推荐
- hosts,命令行前面的显示
1,/etc/hosts,主机名ip配置文件. # Do not remove the following line, or various programs # that require netwo ...
- HDU 5348 MZL's endless loop(DFS去奇数度点+欧拉回路)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5348 题目大意:给你一张图,有n个点,和m条无向边,让你把m条无向边变成有向边,使得每个节点的|出度- ...
- 认识hasLayout——IE浏览器css bug的一大罪恶根源 (转)
认识hasLayout--IE浏览器css bug的一大罪恶根源 转 什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要 ...
- 洛谷 P1184高手之在一起 题解
题目传送门 那位高手是谁啊?@jxpxcsh QWQ. 这道题数据特别水,所以直接使用O(n*m),每读进一个m内的字符串,就扫一遍n的字符串.但注意地点字符串中有可能会有空格,所以这时候就要请出g ...
- MVC – 15.路由机制
15.1.路由检测插件 - RouteDebug 15.2.路由约束 15.3.命名路由 15.4.验证码 15.5.ASP.NET MVC 与 三层架构 15.6.Area区域 15.6.1.尝试将 ...
- vue 子父组件之间的通信,及在调用组件的地方
这里是用了 element ui 你们也可以看一下管方的文档 http://element.eleme.io/#/zh-CN/component/installation 组件html <div ...
- 【PAT】1010. 一元多项式求导 (25)
1010. 一元多项式求导 (25) 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式:以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数 ...
- python 函数操作
四.函数 定义: #!/usr/local/env python3 ''' Author:@南非波波 Blog:http://www.cnblogs.com/songqingbo/ E-mail:qi ...
- 性能测试常用的linux命令
性能测试常用的linux命令 linux测试nginx64bitredhatlighttpd 查看日志 awk '$4 ~/^\[27\/Nov\/2008:15:2[0-5]/ {print ...
- ASP.NET MVC 3和Razor中的@helper
ASP.NET MVC 3支持一项名为“Razor”的新视图引擎选项(除了继续支持/加强现有的.aspx视图引擎外).当编写一个视图模板时,Razor将所需的字符和击键数减少到最小,并保证一个快速.通 ...