IE6下margin时，float浮动产生双倍边距
今天遇到了一个IE6下的兼容性问题，虽然IE6已经不被大众所期待了，用户也已基本上消失的所剩无几，但是，作为一个问题而存在，我们有必要尝试的去研究一下bug的改善方法
对元素float-left，然后再对元素设置margin-left:40px，调试时候，鬼一般的出现了双倍的margin-left,变为80px（同样如果是float-right,margin-right亦是如此）
效果如下：
而在chrome，IE7+，均没有这个现象产生，现象如下：
后来，在样式中给元素添加了一个display:inline之后，就没有这个现象产生了，由于inline是使元素变成行内元素，那么什么是行内元素呢，其实就是内联元素，只是叫法不同，描述的都是一种状态，那么何为内联元素呢？就是说允许其他与之均为内联的元素都能够在同一行显示，如常见的<a>,<span>,当然，我们对其设置宽度和高度是不起作用的，除非我们再给他加入block；
我们的标签我们这么理解，然后当元素变为行内元素之后，会新开辟一个地方，而那个地方之前是没有元素的或者没有内联元素排在它的前面，那么这样，行内元素自然就会自动的浮动到我们父级元素的边框上，则双倍margin的现象就会消失，取而代之的是单倍margin正常显示，就这么理解。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="css/inside.css" />
</head>
<body>
<div class="content clearFix">
<div class="main margin">
</div>
<div class="main margin">
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
.main{
margin-left: 40px;
background-color: #a847c3;
width: 80px;
height: 80px;
padding: 20px 20px;
border: 1px solid #2C2C2C;
float: left;
display: inline;
}
.content{
background-color: #2143fd;
margin: 100px auto;
width: 1000px;
height: 120px;
}
.clearFix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
当然还有一个方法，就是我们将div改成<span>标签，这样的好处就在于，<span>标签本身就是具有内联属性的内联元素，那么问题又来了，内联元素对于宽度和高度是没有效果的，但是我们加了float之后元素就会呈现出来了，要是不加就不会出现，为什么呢（由于默认本身为内联，故没有加display:inline）？现象如下:
加了float之后的现象：
后来我上了百度搜索了一下，键入“加了float”，百度奇迹般的自动弹出
看来这是一个大众耳熟能详的问题啊，笔者不禁为自己知识的浅陋而感慨
然后得出的结果如下：
由于对元素float之后，会使得元素自动变为block，因为几个元素之间的浮动，是需要紧挨着元素的边框，如果不是block，就不能实现浮动。然后内联元素会根据样式中设定的宽度和高度来调整自身的大小，如果样式中没有设定宽度和高度，那么就会自适应为其元素默认的宽度和高度。
样式如下：
.main{
margin-left: 40px;
background-color: #a847c3;
width: 80px;
height: 80px;
padding: 20px 20px;
border: 1px solid #2C2C2C;
/*display: block;*/
float: left;
/*display: inline;*/
}
IE6下margin时，float浮动产生双倍边距的更多相关文章
- 在IE6里面当元素浮动后再设置margin那么就会产生双倍边距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ie6下margin双倍距的问题
今天中午休息时, 公司客服突然报出来一个bug, 一个用ie6的用户打开我们活动网站时, 发现内容都错乱了, 我赶紧上线一看, 发现是正常的. 找了台ie6的xp机器再看了下, 重现出了这个用户的问题 ...
- IE6下margin出现双边距
在IE6下,块元素有浮动和横向margin的时候,横向的margin值会被放大成两倍 解决方法:添加display:inline; eg:下面的例子在IE6下会有两倍边距 <style> ...
- IE6下绝对定位元素和浮动元素并列绝对定位元素消失
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- IE6 margin 双倍边距解决方案
一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度.要实 ...
- ie6下常见的bug 调整页面兼容性
ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...
- 慎用margin系列2---ie6双倍边距问题
IE6下有一个著名的margin双倍bug 一.什么是双边距Bug? 先来看图: 我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素.这个例子很常见,比如在网页布局中,侧边栏靠 ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- x01.Lab.StoreApp: XP 停服，微软变脸
变脸,川剧的一种表演形式,除了哄哄小孩,似乎别无用处.而川剧变脸从业者何其多也,存在时间何其长也.以如此多的从业者,如此长的时间,来进行科研,其成果一定是斐然吧.推而广之,试问天下谁能敌! 微软变脸, ...
- [转]Zabbix 3.0 安装笔记
Zabbix 3.0 只支持CentOS 7.0以上版本,所以先在虚拟机中安装好CentOS 7.0 x64,并设置好IP,允许虚拟机联网. 1.安装MySQL 从最新版本的linux系统开始,默认的 ...
- 六、Android学习第五天——Handler的使用（转）
(转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 六.Android学习第五天——Handler的使用 注意:有很多功能是不 ...
- [Copy]Bird's booklist
Copy from Bird Thanks! Here is his website: Bird's book list 0x01 编程语言 Python基础教程(第2版) Effective Jav ...
- TeamTalk源码分析之login_server
login_server是TeamTalk的登录服务器,负责分配一个负载较小的MsgServer给客户端使用,按照新版TeamTalk完整部署教程来配置的话,login_server的服务端口就是80 ...
- Convert.ToDateTime（值），方法可以把一个值转化成DateTime类型。
例子:将日历控件的值转化成DateTime类型. DateTime beginDate = Convert.ToDateTime(this.beginCalendar.EditValue);
- http协议（六）报文首部
http请求和响应报文内容比较多,会分为大概四部分更新,最近比较忙,没太多时间整理- - 首先来看看报文结构吧 1.http请求报文 http请求报文由方法.URI.http版本.http首部字段等构 ...
- PAT 1018. 锤子剪刀布 (20)
现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第1行给出正整数N(<=105),即双方交锋的次数.随后N行,每行给出一次交锋的信息,即 ...
- JAVA常用的XML解析方法
转并总结自(java xml) JAVA常用的解析xml的方法有四种,分别是DOM,JAX,JDOM,DOM4j xml文件 <?xml version="1.0" enco ...
- DEDECMS之三 首页、列表页怎么调用文章内容
一.首页调用 百度了很多,没有找到实际的解决方法,对于直接读取数据库,这种写法不会采取. 后来,仔细考虑,这部分解决的内容不会很多,所以直接使用了简介的内容 方法一(默认长度55) [field:in ...