`

解决IE6下float right 换行bug方案(转)

阅读更多
IE6下有不少奇怪的Bug,今天就碰到一个,float right换行bug,情况是并列的几个块级元素如div和span,一些设置了左浮动一些设置右浮动,一行的宽度足够放下所有的块级元素,但此时ie6则显示右浮动的其中一块换行了,下面给出实例和解决方法:
实例说明下:html结构如下
<div>
<span class="left">左边</span>
<span class="center">中间</span>
<span style="float: right" class="right">右边</span>
</div>.left和.center都没有 float 属性,然后在FireFox,google chrome及IE7、IE8等浏览器下都正常显示,可在Internet Explorer 6 下有bug:本来排一行的左边+中间+右边,可右边淘气的跳到了下一行。

解决方案:

不用修改css什么的,只要把float的模块放到非float的前面即可。

上面的html结构重排下序:

<div><span style="float: right" class="right">右边</span> <span class="left">左边</span> <span class="center">中间</span> </div>听说IE9出炉了,对CSS的支持有了很大提升,衷心希望所有的IE6都快些升级到IE9.
分享到:
评论
2 楼 lbird 2011-11-26  
牛逼!膜拜大神,这个问题纠结了我半天啊,终于在您这儿解决了
但是,到底是什么原因呢?
1 楼 Scooler 2011-10-12  
非常感谢..刚好被这个问题困扰~~~
解决了~

相关推荐

    IE7 float:right 右浮动时元素换行错位的bug解决方法

    本文将详细讨论`float:right`在IE7中遇到的元素换行错位问题以及如何解决这个问题。 首先,我们需要理解`float`属性的工作原理。`float`属性允许元素脱离其正常文档流,向左或向右移动,直到其边缘碰到容器的边框或...

    IE6浮动换行bug比较实用简单解决方法

    本文针对IE6的浮动换行bug提出了一种实用且简单的解决方案。 首先,我们需要了解IE6浮动换行bug的成因。在IE6中,当使用浮动布局(float)时,子元素会脱离正常的文档流。在某些布局安排下,比如左侧浮动元素(left...

    E7 float:right 时元素换行出现在下一行的bug解决方法

    在网页布局设计中,`float`属性是一个至关重要的CSS特性,它允许元素脱离其正常文档流,从而可以创建多列布局、对齐...然而,在还需要支持旧版IE浏览器的项目中,理解并解决`float:right`引起的换行问题仍然是必要的。

    IE6,7,8兼容

    本文主要针对IE6、IE7和IE8以及Firefox浏览器在DIV+CSS布局下的兼容性问题进行分析,并提供一系列解决方案。 #### 二、CSS兼容性技巧 ##### 1. **垂直居中** - **问题描述**:在某些情况下,需要将文字或元素在...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”,这揭示了在Web开发中,尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时,开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为,...

    IE6,IE7,IE8兼容性问题

    本文将针对IE6, IE7, IE8中常见的兼容性问题进行深入探讨,并提供相应的解决方案。 #### 二、CSS兼容性问题及解决方案 ##### 2.1 div的垂直居中问题 **问题描述**:在某些情况下,开发者希望将一个元素在其父容器...

    解决浏览器兼容问题的CSS语法技巧大全.doc

    解决方案是使用 `#left{ margin-right:-3px; }`。 7.IE 捉迷藏的问题 当 div 应用复杂的时候,每个栏中又有一些问题。解决方案是使用 `display:block;` 或 `display:inline;` 来解决问题。 解决浏览器兼容问题的 ...

    css兼容问题的解决方案

    **问题描述**:设置了`float`属性的`div`在IE浏览器下,其`margin`值会被错误地解释为两倍。 **解决方案**: ```css #IamFloat { float: left; margin: 5px; /* IE 下理解为 10px */ display: inline; /* IE 再...

    最全的CSS浏览器兼容问题—HTMLCSS教程1

    本文总结了CSS浏览器兼容问题的解决方案,涵盖了div的垂直居中问题、margin加倍的问题、浮动ie产生的双倍距离、IE与宽度和高度的问题、页面的最小宽度、DIV浮动IE文本产生3象素的bug、IE捉迷藏的问题等七个方面的...

    css浏览器兼容.docx

    在IE6下,设置为float的div的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个div里面加上`display:inline;`。 3. 浮动 IE 产生的双倍距离 在IE下,浮动元素会产生双倍距离的问题。解决方案是使用`display...

    ie和ff兼容性大集合

    本文将基于实际经验与网络资源,总结Internet Explorer (IE) 和 Firefox (FF) 在常用网页布局与元素样式上的差异,并提供相应的解决方案。 #### 1. Div 自动居中的兼容性问题 - **问题描述**:在设置 `div` 的 `...

    CSS浏览器兼容问题整理(IE6.0、IE7.0_与_FireFox)

    为了解决这个问题,可以在浮动元素的CSS中添加针对IE的特定样式,如`margin-right:-3px;`,以此来消除间隙。 ### 7. IE“捉迷藏”的问题 在复杂的布局中,某些内容可能在视觉上不可见,但可以通过鼠标选择检测到。...

    CSS兼容IE和Firefox的技巧集合

    - **问题描述**:设置了`float`属性的`div`在IE下设置的`margin`会加倍,这是一个IE6已知的bug。 - **解决方案**:在该`div`中添加`display:inline;`属性。 - **示例代码**: ```css #imfloat { float: left; ...

    目前比较全面的浏览器CSS BUG兼容汇总

    以上是针对IE7、6及Firefox的部分CSS兼容性问题的解决方案。在实际开发中,还需要关注其他浏览器如Chrome、Safari和Opera的兼容性,可以使用浏览器前缀、条件注释以及工具如Autoprefixer和Modernizr来帮助处理这些...

Global site tag (gtag.js) - Google Analytics