IE的双边距Bug以及解决办法
display:inline和display:block区别
一、什么是双边距Bug?
先来看图:
我们要让绿色盒模型在蓝色盒模型之内向左浮动,并且距蓝色盒模型左侧100像素。这个例子很常见,比如在网页布局中,侧边栏靠左侧内容栏浮动,并且要留出内容栏的宽度。要实现这样的效果,我们给绿色盒模型应用以下CSS属性:
- .floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; }
复制代码
很简单,对吧?但是当我们在IE6中查看时,会发现左侧外边距100像素,被扩大到200个像素。如下图:
二、怎么会这样?
说 实话,这个原因还真是不清楚。但是这样的结果确确实实在IE6中出现了。而且这种情况出现的条件是当浮动元素的浮动方向和浮动边界的方向一致时才会出现。 如同上面的例子一样,元素向左浮动并且设置了左侧的外边距出现了这样的双边距bug。同理,元素向右浮动并且设置右边距也会出现同样的情况。同一行如果有 多个浮动元素,第一个浮动元素会出现这个双边距bug,其它的浮动元素则不会。
三、如何修正这个Bug?
很简单,只需要给浮动元素加上display:inline;这样的CSS属性就可以了。就这么简单?对,就这么简单。如下图:
CSS代码如下:
- .floatbox {float: left; width: 150px;height: 150px; margin: 5px 0 5px 100px; display: inline; }
复制代码
display属性的inline和block inline是内联元素,block是块级元素
它可以让行内显示为块的元素,变为行内显示,例如
- <div> DIV1 </div>
- <div> DIV2 </div>
复制代码
这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了
- <div style= "display:inline "> DIV1 </div>
- <div style= "display:inline "> DIV2 </div>
复制代码
DIV1 和DIV2这时候显示在同一行了 和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
- <span style= "display:block "> SPAN1 </span>
- <span style= "display:block "> SPAN2 </span>
复制代码
display:inline 比较经典的用法是用在 <ul> 下的 <li> 中内联block一般一个块占一行,除非floatinline是自动排为一行,就象段内的文字一样,可成为多行。display:inline 的作用是设置对象做为行内元素显示, inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以象span一样显示在一行了。
IE的双边距Bug以及解决办法的更多相关文章
- ie6双边距bug及其解决办法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- IE6中浮动双边距bug
想要创建出漂亮的网页设计, 除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码, 漂亮的设计就此就要完成了, ...
- 【转载】IE浏览器常见的9个css Bug以及解决办法
IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...
- Dumpzilla工具第615行bug的解决办法
Dumpzilla工具第615行bug的解决办法 在Dumpzilla使用选项frequency时,会提示SQL语法错误.这是由于其中SQL语句编写错误.需要将615行中: where url l ...
- IE双边距bug
标准参考 根据 W3C CSS2.1 规范中的描述,对于非替换的浮动元素,若 'margin-left' 或 'margin-right' 特性的计算值为 'auto',则它们的实际使用值为 '0'. ...
- 记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法
原文:记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法 转载请注明出处:http://www.cnblogs.com/Ray1024 一.问题描述 在MFC中使用Dir ...
- 最新版jQuery v3.3.1的BUG以及解决办法(什么问题不重要,怎么解决问题才重要)
发现问题 最新版的 FineUIPro v5.2.0 中,我们将内置的 jQuery v1.12.4 升级到 jQuery v3.3.1 ,可以看升级记录: +升级到jQuery v3.3.1. ...
- RCP: P2 Update两个烦人bug和解决办法
问题 Eclipse新的P2 Update机制,使用起来很方便,如果使用P2 plugin自带的UI,开发者完全不用写任何代码 即可实现application的在线更新. 但是P2 Update至少有 ...
- (原创)spring mvc和jersey rest 组合使用时单例对像实例化两次的BUG及解决办法
项目中没用spring 的restTemplate 而是采用 jersey来做rest 的实现,一直用着,也没发现有什么不对,后来加入了,以quartz用硬编码方式实现,结果启动项目的时候报错 ,具体 ...
随机推荐
- ArrayList底层实现
ArrayList 底层是有数组实现,实际上存放的是对象的引用,而不是对象本身.当使用不带参的构造方法生成ArrayList对象时,实际会在底层生成一个长度为10的数组 当添加元素超过10的时候,会进 ...
- SGU438_The Glorious Karlutka River =)
好题,有一些人在河的一边,想通过河里的某些点跳到对岸去.每个点最多只能承受一定数量的人,每人跳跃一次需要消耗一个时间.求所有人都过河的最短时间. 看网上说是用了什么动态流的神奇东东.其实就是最大流吧, ...
- spring通过工厂模式解决页面耦合问题
spring通过工厂模式解决页面耦合问题
- 删除XML文件中的空格
应要求需要删除xml文件中的空格,制表符等字符.要求双引号和xml的text属性中包含的空格不删除. bool delSpace(QFile &file, QString path) //删除 ...
- MT【144】托兰定理【图论】
平面上$2n$个点$(n>1,n\in N)$,无三点共线,任意两点连线段,将其中任意$n^2+1$条线段染红色. 求证:三边都为红色的三角形至少有$\left[\dfrac{2}{3}(n+\ ...
- Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版
WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...
- BZOJ 4408: [Fjoi 2016]神秘数
4408: [Fjoi 2016]神秘数 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 464 Solved: 281[Submit][Status ...
- 【agc019C】Fountain Walk
Portal --> agc019C Description 有一个\(10^8*10^8\)的网格图,一格距离为\(100\),第\(x\)条竖线和第\(y\)条横线的交点记为\((x,y)\ ...
- HDU 3271 数位dp+二分
SNIBB Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- python中高阶函数与装饰器(3)
>>> f = lambda x: x * x>>> f<function <lambda> at 0x101c6ef28> >> ...