先看css代码:
div {
float:left;
margin-left:10px;
width:420px;
height:150px;
border:1px solid #ff0000;
}
这样设置左边距设置为10px,但IE6.0解释为20px,解决办法就是是加上display:inline
代码:
div {
float:left;
margin-left:10px;
display:inline;
width:420px;
height:150px;
border:1px solid #ff0000;
}
在网上查了下,具体原因如下,,长篇大论,我也懒的看了!贴出来给有需要的朋友
一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍!
情况应该如何?
下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界,使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止,一直都还不错。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
陈旧的IE“双倍占据”
原样的相同代码被在IE/Win中浏览时以些微不同的方式显示,下面的图释展示了IE/Win在布局上所做的。
这为什么会发生?别问这种傻问题!这就是IE,记得吗?符合标准只是理想的状况,不指望实现,这个简单的事实正验证了。
重点
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。
最后,修复办法!
直到现在(04年1月)这个Bug一直被认为是无法修复的,通常用来替代错误的边界的控制方法如:一个不可视浮动元素的左边距,连同一个内嵌的盒子一起,可视的盒子装在不可视浮动元素里;或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了,但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。
Steve Clason发现了一个修复办法,描述在他的Guest Demo里,修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法,使用一个属性来修复影响不相关属性的Bug。
现在如何来做?
研究它,简单地将{display: inline;}设置给浮动元素就是全部所需做的!是的,听起来太简单了,不是吗?不过这是真的,仅仅一个display的"inline"声明已经能够胜任了。
熟悉规则的人知道浮动元素自动设置为"block"元素,而不管他们之前是什么。就如Steve从W3C里指出:
9.5.1 Positioning the float: the 'float' property
"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.
right
Same as 'left', but content flows on the left side of the box, starting at the top.
none
The box is not floated. "
这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。因而,这个修复办法可以被直接应用,而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙,只要把这个修复装入IE独用的Tan Hack里,细节如同IE Three Pixel Text-Jog Demo。
下面是两个使用了前面相同代码的生动演示,第一个照常显示了IE的Bug,下一个对浮动元素使用了"inline"修复。
<style type="text/css">
#box{
height:500px;
margin-left:20px;
background:#ff0000;
}
#left{
width:200px;
height:400px;
background:#CCCCCC;
float:left; display:inline;
margin-left:20px;
}
#footer{
clear:both;
margin-left:20px;
background:#00FF00;
}
</style>
<div id="box">
<div id="left">left</div>
<div id="left">left</div>
<div id="footer">footer</div>
</div>
分享到:
相关推荐
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助...
此扩展程序将在您的浏览器中用流光溢彩环绕 YouTube 视频。无需额外的硬件,如灯带或智能灯,一切尽在您的浏览器中! 描述: 让自己沉浸在流光溢彩的YouTube视频中! 此扩展程序将在您的浏览器中用流光溢彩环绕...
嵌入式Linux设备驱动开发详解-光盘代码 书籍里面的光盘 实例代码: ----本书部分实例的源... ----本章实例中用到的器件手册 gcc-2.95.3.tar.bz2: ----gcc工具 lib.tar.bz2: ----相关库 图片 ----书中所有插图
说明 这个函数是Delphi中用得最多的函数,现在就列举几个例子以得到直观的理解 "%" [索引 ":"] ["-"] [宽度] ["." 摘要] 类型 它是以"%"开始,而以"类型"结束,"类型"表示一个具体的类型。中间是用来格式化"类型"的...
VC MFC 项目开发中用到的例子-----SID与MDI全屏显示 这是之后上传的一个 之前的一个少了DSP文件 不能方便的打开
特征在开发过程中用esbuild替换babel-loader 用esbuild替换babel-loader以加快构建时间用esbuild替换terser,以加快构建时间开玩笑时使用esbuild入门按照设置您的项目。常问问题为什么会更快? 在内部create-react-...
中用设计:2019年年度报告.PDF
matlab中用ecc代码HDL SEC / DED制片人 Hamming ECC编码器/解码器的MATLAB / Octave生成器。 输出格式为Verilog HDL。 可选在汉明编码额外的奇偶校验位之上添加,我们有单错误校正/双错误检测(SEC / DED)算法。 :...
前言 本文将会用T-SQL 语句实现建表、建约束、建关系。 一. 对表进行操作 1.1 创建表 --使用 create table 语句创建表 语法: create table 表名(字段 数据类型 约束) 例如: create table Student( ...
自己用C#做的RS232通讯程序...看看吧...里面纠正了网上很多看似可以的程序段...这也是自己实验过的... ----------------2020/06/08 18:16 更新分割线--------------- 已经有十年了 居然还有人需要 那就开始免费吧 ...
node原理讲解实例探究|1源码挖掘: Webpack 中用到 Node 的 10 个核心基础能力2案例一: [龟兔赛跑] Node 的语言基础 - JS(ES5[6[78)案例二: [视频时长统计] Node 的模块机制(CommonJS)与包管理|6案例五: ...
卡塔扑克关于我做kata的场所做TDD只做功能测试,以便能够很容易地重构。 先简单后聪明:以最简单的方式... 每张牌还有一个值为 2, 3, 4, 5, 6, 7, 8, 9, 10, jack, Queen, king, ace (表示为 2, 3, 4, 5, 6, 7, 8 , 9,
node原理讲解实例探究|1源码挖掘: Webpack 中用到 Node 的 10 个核心基础能力2案例一: [龟兔赛跑] Node 的语言基础 - JS(ES5[6[78)案例二: [视频时长统计] Node 的模块机制(CommonJS)与包管理|6案例五: ...
此软件包的目的是生成有关在ngx项目中用i18n注释的已翻译行数的报告。 用 另存为开发者依赖项: npm i ngx-i18n-report --save-dev 添加到package.json的scripts scripts: { " i18n-report " : " ngx-i18n-...
我们之前研究过的 typescript中用mobx替换redux的内容。目录开发环境操作系统:窗口配置管理:git 部署自动化: 编辑器:服务器语言:java 决定不进行SSR。 图书馆选择选择React 。 我选择的最重要的原因是,我有在...
Matlab中用RBF网络逼近非线性函数-RBF网络用于函数逼近.rar 这是一个用RBF网络逼近非线性函数的实例,希望对大家有所帮助。 所含文件: 20090630152009375.jpg 结果: ...
包含了tcp/ip详解卷1:协议一书中用到的作者编写的软件源码,给学习此书的同学收藏
如今,这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持,包括Safari,谷歌浏览器,IE,Opera和火狐浏览器。下面让我们来看看border-radius的语法,解释,以及IE是如何支持它的。 语法和说明 在CSS3中用...
在如何解决平衡方面,涉及两个关键且相关的步骤: 我们需要找到当经济中的每个人都遵循政策功能时所产生的遍历分布,但会受到不同特质冲击的打击。 我们需要找到可以清理市场的资产价格 问题集+入门代码将引导您完成...