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

为何现代浏览器以及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代码：

    
    呦喝，这不是张含韵小姐吗？

结果如下图：（实现图文混排 使用inline元素，block元素在ie6 ie7下会出现换行的bug）

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

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

    
    
呦喝，这不是张含韵小姐吗？

结果如下图：

而在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/