三、absolute属性与IE6/IE7之间的误会

absolute属性确实存在不少兼容性的问题,首先absolute属性定位相关(left/top)的些bug(例如IE6的奇偶bug)这里不予以讨论。//zxx:很多人都知道,再说就没意思了。

所以,下面所展示的些“误会”都是没有定位属性的(即无left/top/right/bottom)。

1. margin定位元素绝对定位元素重叠的误会

很简单,双栏自适应布局中,左侧元素absolute绝对定位,右侧的margin撑开距离定位。可参见“页面重构鑫三无准则 之无宽度准则”一文中新浪微博的实例页面中的使用(那里是padding撑开距离)。

为了再现IE6/IE7下的这个argin定位元素绝对定位元素重叠的误会,我特地做了个简单的demo页面,您可以狠狠地点击这里:IE6/7下margin与absolute元素重叠demo

可以看到在IE6/7下左侧应用了absolute属性的图片与右边的自适应的文字内容重叠了,如下图所示(截自IE7):

此问题出现的原因与下面浮动与绝对定位元素重叠有着某些类似的原因,因为问题的出现都与绝对定位元素所在的标签水平有关:上述demo中,absolute属性所在的标签是div标签,属于block水平的元素。如下截图:

要是我们把这里的block水平的div元素修改成inline水平的span标签,则重叠的问题就没有了。如下截图:

您可以狠狠地点击这里:IE6/7下margin与absolute元素重叠问题修复demo

如果您手上的浏览器是即使是IE6/IE7,点击上面的demo页面也不会有重叠的bug了,而此问题的修复是非常简单的将div标签换成span,如下截图所示:

2. 浮动与绝对定位元素重叠的误会
很简单,前面一个标签是浮动元素,后面的是block水平的绝对定位元素,结果IE8+,以及现代浏览器文字与图片重叠;但是IE6/IE7浏览器确是并排显示的。如下截图示意:

CSS代码如下:

.box{padding:1em; background-color:#f0f3f9; overflow:hidden; _zoom:1;}
.l{float:left;}
.abs{position:absolute;}

HTML代码如下:

<div class="box">
<img class="l" data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
<div class="abs">呦喝,这不是张含韵小姐吗?</div>
</div>

为何现代浏览器以及IE8+浏览器下浮动的图片与绝对定位的文字会重叠,而IE6/7却是并列显示?这是由于IE6/IE7浏览器将inline水平标签元素和block水平的标签元素没有加以区分一视同仁渲染了。

我在前面已经多次提到,应用了绝对定位属性的元素具有包裹性,等同于没有高度与宽度的inline-block元素

上面斜体加粗的这个结论实际上说得不够严谨,在IE6/IE7浏览器下,上面的话是没错的;在所有浏览器下,对于inline水平的元素,上面的话也是没错的;但是在现代浏览器下,对于block水平的元素,上面的结论就有商榷之处。

实际上,按照正确的绝对定位渲染,像div, p这类block水平标签并未完全inline-block化。inline-block化的元素有三大特性:包裹性;高宽可定义;图文混排。然而,div, p这类标签应用了position:absolute后,在非IE6/7浏览器下,

只有包裹性和高宽可定义这两个特性,但并不支持图片混排,也就是与图片文字在一起的时候会换行。

下面是举例字,验证上面的结论。首先是这么句话:“对于inline水平的元素,上面的话也是没错的”。这句话的意思其实是,如果是inline水平的元素,上面的那个示例就不会有兼容性问题了,于是我们把应用了abs类名的div标签改成span,如下HTML代码:

<div class="box">
<img class="l" data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
<span class="abs">呦喝,这不是张含韵小姐吗?</span>
</div>

结果如下图:(实现图文混排 使用inline元素,block元素在ie6 ie7下会出现换行的bug

不仅IE8浏览器,Firefox/Chrome等先前重叠的现在都并排显示了。

下面再来验证这个结论:“现代浏览器下block水平元素absolute化后不支持图片混排”。也是很简单的,我们可以把最上面重叠的那个例子的图片的浮动属性干掉,也就是如下的HTML代码:

<div class="box">
<img data-src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
<div class="abs">呦喝,这不是张含韵小姐吗?</div>
</div>

结果如下图:

而在IE6/IE7浏览器下,依旧是并排显示滴,如下图:

OK,现在应该很好理解最上面为何在现代浏览器下图片文字重叠而IE6/IE7下并排显示了。

在“CSS float浮动的深入研究、详解及拓展”系列中多次阐述了浮动元素的“无高度”特性,所以,当图片应用了float:left属性后,图片所占据的高度丢失,于是,原本换行显示在下面的文字就提上去了,于是就形成了重叠,如下图标示:

来自:http://www.zhangxinxu.com/wordpress/2011/03/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsolute%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%B8%89%EF%BC%89/

absolute属性与IE6/IE7之间的误会的更多相关文章

  1. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  2. img标签中的alt属性在IE6/7/8中的兼容问题

    W3C HTML 4.01 规范规定,alt 属性指定了在 User Agents 不能显示图片.表单和 applets 的时候显示的替换文字.alt 属性在 IE6 IE7 IE8(Q) 下具有双重 ...

  3. DIV+CSS IE6/IE7/IE8/FF兼容问题大全

    1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...

  4. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  5. 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  6. [IE兼容性] Table 之边框 (IE6 IE7 IE8(Q) 中 cellspacing 属性在重合的边框模型的表格中仍然有效)

    在 IE6 IE7 IE8(Q) 中,在通过 border-collapse:collapse 使用表格的重合边框模型后,其 cellspacing 属性仍然有效: 在 其他浏览器 中,此时的 cel ...

  7. 针对firefox ie6 ie7 ie8的css样式中的line-height属性

    针对firefox ie6 ie7 ie8的css样式中的line-height属性 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对! ...

  8. (转)让IE6/IE7/IE8浏览器支持CSS3属性

    原文链接 http://blog.csdn.net/h5_queenstyle12/article/details/50437442 一.下载 搜索下载:ie-css3.htc,它是让IE浏览器支持C ...

  9. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

随机推荐

  1. 求菲波那契数列的第n个数

    1,2,3,5,8,13..... 求第n个数 def get_num(n): if n == 1: return 1 if n == 2: return 2 return get_num(n - 1 ...

  2. Word2vector原理

    词向量: 用一个向量的形式表示一个词 词向量的一种表示方式是one-hot的表示形式:首先,统计出语料中的所有词汇,然后对每个词汇编号,针对每个词建立V维的向量,向量的每个维度表示一个词,所以,对应编 ...

  3. 【转载】C#扫盲之:静态成员、静态方法、静态类、实例成员及区别

    文章目录 1.静态成员.实例成员 2.静态类 3.类的静态成员和非静态成员区别 --------------------------------------分割线------------------- ...

  4. vim字符串替换命令

    呜呜老是忘. 这里记录一下,仅仅记录当中日经常使用的最多的命令. :%s/str1/str2/g   替换每一行中全部str1为str2 经常使用! :s/str1/str2/g 替换当前行全部str ...

  5. Js两种post方式(转)

    第一种提交post的方式是传统方式,判断浏览器进行post请求. <SCRIPT stype=text/javascript> var xmlobj; //定义XMLHttpRequest ...

  6. 翻译:A Tutorial on the Device Tree (Zynq) -- Part I

    A Tutorial on the Device Tree (Zynq) -- Part I 此教程的目的 本教程是针对Xilinx' Zynq-7000 EPP设备(一个集成了FPGA的ARM Co ...

  7. 【学生信息管理系统】EOF 和 BOF

    敲完学生信息管理系统时,在删除信息的时候,常常会出现下图这种错误,遇到问题就要解决这个问题.经过查阅理解了记录集Recordset的EOF和BOF属性,用这两个属性能够知道记录集中是否有信息存在. E ...

  8. Devices下设备的进程显示为问号的问题

     adb shell getprop ro.debuggable      返回  ro.debuggable=0     说明这个机子的版本不是userdebug版本,是user版本     只有这 ...

  9. python实现斐波那契查找

    通过在网上找教程解释和看书,总结出一套比较简单易懂的代码实现. 斐波那契查找和二分查找一样,针对的是有序序列,在此前提下: # 先创建一个Fibonacci函数 fib = lambda n: n i ...

  10. 查询历史使用过的命令并使用(history)

    一.什么是history 在bash功能中.它能记忆使用过的命令,这个功能最大的优点就是能够查询以前做过的举动.从而能够知道你的执行步骤.那么就能够追踪你曾下达过的命令.以作为除错的工具. 二.His ...