span 右浮动折行 解决ie6/7中span右浮动折行问题
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 中的内容。
问题描述
IE6 IE7 IE8(Q) 下,若浮动元素之前存在兄弟行内非浮动元素,IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边,导致该浮动元素折行。
造成的影响
如果我们仅仅在 IE6 IE7 中编写页面并进行测试,当看到上面对测试代码的截图中的效果,在不清楚导致右浮动元素换行的原因是 IE6 IE7 对于同一行内浮动元素与非浮动行内元素的处理存在 Bug 的情况时,有可能会为右浮动元素设置一个负值 'margin-top',这样虽然在 IE6 IE7 中能保证布局的正常,但在其他浏览器下就会出现异常。
受影响的浏览器
IE6 IE7 IE8(Q) 问题分析
分析以下代码:
<div style="border:1px solid black; font:14px Verdana; padding:5px;"> <span style="background:gold;">Text1</span>
<span style="background:lightblue;">Text2</span> <span style="background:pink;">Text3</span>
<span style="background:greenyellow;">Text4</span> <span style="background:peru;">Text5</span>
<span style="background:tomato; float:right;">Some text aligning right</span> </div>
这段代码在各浏览器中的效果如下:
IE6 IE7 IE8(Q)
IE8(S) Firefox Chrome Safari Opera
可见,
在 IE6 IE7 IE8(Q) 中,浮动的 SPAN 折行浮动在新的一行上,同时位置也脱离了其父容器;在其他浏览器中,则遵照 CSS 2.1 规范对浮动的定义,将浮动元素显示在浮动框另一边的第一个可用行上。
在 IE6 IE7 下,测试代码没有达到我们预计的效果,右浮动的 SPAN 折行浮动在新的一行上,同时位置也脱离了其父容器。 现在看看 Text1、 Text2„„Text5 所在的 SPAN 元素作为浮动框之前当前行的内容,应该显示在浮动框另一边的第一个可用行上。 右浮动的 SPAN 紧贴在其父容器的右边界,其左侧的空白区域只要有足够的空间容纳这 5 个非浮动的 SPAN 元素,它们就应该保持与右浮动的 SPAN 元素位于同一行上。 这里 IE6 IE7 以及所有版本 IE 的混杂模式的处理均是错误的。 此问题的触发条件:
同一个父容器内有多个行内元素;某些为非浮动元素,某些为浮动元素(可以是左浮动或右浮动);浮动的子元素不都是位于非浮动的子元素之前。 解决方案
依具体情况可以使用三种方法:使用绝对定位模拟右浮动、使用 IE hack 专门在IE6 IE7 中设置负的上外边距、将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。
使用绝对定位(position:absolute)模拟右浮动(float:right)。 为了避免 IE6 IE7 的这个 BUG,可以不使用右浮动,而是用绝对定位及右偏移(right:XXXpx),如为右浮动元素设置 'position:absolute' 及 'right:3px' 替代 'float:right',但这样做的代价是必须为父容器 DIV 元素设置 'postion:relative',这么做仍然会破坏原文档结构。所以我们并不推荐此方法。使用 IE hack 专门在IE6 IE7 中设置负的上外边距(margin-top:-XXXpx)。 既然此 Bug 为IE6 IE7 专有,则只需要在 IE6 IE7 下为右浮动元素设置一个负的上外边距即可,其他浏览器保持原样式。所以可以考虑使用只有 IE6 IE7支持的 hack 方式:在 CSS 特性前加星号 '*'。
如 *margin:-23px 5px 0 0,这样既可消除 IE6 IE7 中的 Bug,但是这么做是利用了浏览器的 Bug,并没有消除 Bug。在能有个更好的解决方法的时候,不推荐使用 CSS hack 来解决问题。调整SPAN元素的位置。 通过上面总结的 Bug 触发条件,我们可以考虑直接调整父容器中 SPAN 子元素的位置来回避 IE6 IE7 中此 Bug,即将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。
复制代码 代码如下:
<div style="border:1px solid black; font:14px Verdana; padding:5px;"> <span style="background:tomato; float:right;">Some text aligning right</span>
<span style="background:gold;">Text1</span> <span style="background:lightblue;">Text2</span> <span style="background:pink;">Text3</span> <span style="background:greenyellow;">Text4</span> <span style="background:peru;">Text5</span> </div>
IE下文本被折行的解决方案
2009.06.27
无论何时,IE总是让页面制作者感到那么的黯然销魂,尤其是IE6,IE7次之,虽然IE8已经做了很大的改进,但由于XP用户的数量实在太大,而且大部分不愿意升级他们的浏览器,所以页面制作者只能一次又一次的被IE6折磨得死去活来。
今天在写页面的时候,碰到了折行的问题,正好复习一下CSS中关于断行处理的问题,在这里纪录一下心得: HTML结构及CSS样式如下:
<ul>
<li><a href=”#”>…</a></li> <li><a href=”#”>…</a></li> <li><a href=”#”>…</a></li> </ul>
li {float:left; margin-right:10px; line-height:20px;}
这是不定宽的浮动,可是当这段结构在IE6及IE7下显示却变成了这样,文字被折行显示:
这个折行显示的问题,只要强制文本不换行显示就可以解决,在CSS中关于换行的属于有两个分别是word-break以及white-space,其中word-break是IE的专有属性,由于这个折行问题只在IE下会出现,所以先试一下word-break。 word-break有三个参数:normal、break-all、keep-all
normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
由于是要不允许文本字间断行,所以使用第三个参数keep-all,但是当文字中有空格的时候,依然会出现折行的现象:
而white-space则是检索对象的空格处理方式的,同样有三个参数:normal、pre、nowrap
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象 nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)
所以当文本对象中存在空格,导致文本显示折行的话,可以使用white-space:nowrap,即可解决文本折行的问题。