慎用margin系列2---ie6双倍边距问题
2024-08-25 11:40:19
IE6下有一个著名的margin双倍bug
一、什么是双边距Bug?
先来看图:
我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:
以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
}
很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:
二、怎么会这样?
说实话,这个原因还真是不清楚。但是这个bug确实在IE6中出现了。这种情况出现的条件如下:
1.元素设置了浮动float属性
2.元素设置了margin属性
3.浮动方向和边界的方向一致
如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。
三、如何修正这个Bug?
很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:
CSS代码如下:
以下为引用的内容:
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
最新文章
- JS高程4.变量,作用域和内存问题(3)垃圾收集
- 【转】Gvim开发环境配置笔记--Windows篇
- 【iCore3 双核心板_FPGA】例程十三:FSMC总线通信实验——复用地址模式
- 转:NLog之:文件类型目标(File target)
- 11月09日《奥威Power-BI vs微软Power BI》腾讯课堂开课啦
- VirtrualBox 搭建本地lamp环境
- 我爆一个托 QQ305242038 电话 18782169971
- hdu4753
- iframe动态创建及释放内存
- zookeeper的安装与部署-集群
- 如何创建并运行java线程
- R语言-混合型数据聚类
- 2017-07-18&;19
- keyvalue对RDD s
- POJ 3122 Pie【二分答案】
- 测试工具之Match Tracer(正则表达式匹配工具)
- HP1020打印机“传递给系统调用的数据区域太小” 如何处理?
- C#学习笔记(1)——快捷键
- python---基础知识回顾(七)迭代器和生成器
- Java--详解WebService技术
热门文章
- [USACO 07NOV]电话线Telephone Wire
- Cocos2d-x之物理引擎
- tar.xz 解压
- A Bite Of React(2) Component, Props and State
- CSS div内放长英文字母或长数字自动换行 CSS一行排不下自动打断换行
- python面试题之什么是Tkinter ?
- $vim$配置以及$linux$
- firmware
- HDU-4003 Find Metal Mineral 树形DP (好题)
- Vue开发环境的搭建及基本开发流程