解决IE6/7/8中span右浮动换行问题

已有 1869 人阅读此文 | 2016-06-26 01:30 | 来源: 刘传鹏博客 | 作者: 刘传鹏

浏览器兼容性

IE6/7/8 下,若浮动元素之前存在行内非浮动元素,IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边,导致该浮动元素折行。

RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部

标准参考

W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释。以下是关键段落:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box.

由上面的描述可以得到以下结论:如果一个元素浮动前是一个行内元素,则该元素浮动后,顶部应与其之前所在的行框顶部对齐。

关于浮动的详细信息,请参考 CSS 2.1 规范 9.5 Floats 中的内容。

问题分析

代码如下:

<div style="border:1px solid black;font:14px Verdana; padding:5px;">
    <span style="background:#ffff00;">左边</span>
    <span style="background:#ff0000; float:right;">右边</span>
</div>

这段代码在各浏览器中的效果如下:

span右浮动

在 IE6 IE7 IE8(Q) 中,浮动的 SPAN 折行浮动在新的一行上,同时位置也脱离了其父容器;在其他浏览器中,则遵照 CSS 2.1 规范对浮动的定义,将浮动元素显示在浮动框另一边的第一个可用行上。IE6 IE7 以及所有版本 IE 的混杂模式的处理均是错误的。

问题触发条件:

同一个父容器内有多个行内元素;某些为非浮动元素,某些为浮动元素(可以是左浮动或右浮动);浮动的子元素不都是位于非浮动的子元素之前。

解决方案

依具体情况可以使用三种方法:使用绝对定位模拟右浮动、将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。

使用绝对定位(position:absolute)模拟右浮动(float:right),即为右浮动元素设置 ‘position:absolute’ 及 ‘right:3px’ 替代 ‘float:right’,但这样做的代价是必须为父容器 DIV 元素设置 ‘postion:relative’,这么做仍然会破坏原文档结构。所以我们并不推荐此方法。

调整SPAN元素的位置,通过上面总结的 Bug 触发条件,我们可以考虑直接调整父容器中 SPAN 子元素的位置来回避 IE6 IE7 中此 Bug,即将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。

代码如下:

<div style="border:1px solid black; font:14px Verdana; padding:5px;">
  <span style="background:#ff0000; float:right;">右边</span>
  <span style="background:#ffff00;">左边</span>
</div>

 

 

本文地址: http://liuchuanpeng.com/website-making/591.html

已有 2 人评论 网友评论

必填

选填

选填

刘传鹏博客|专注分享互联网商业模式和网站运营推广策略的博客