`

Firefox下使用float:right换行问题

 
阅读更多

     今天遇到一个很奇怪的问题,使用float:right时,在Firefox中显示到了下一行(不是内容过长),而在Chrome和IE(10、11)中都是正常的。代码类似如下: 

 

<div>
  <span>logo</span>
  <span>name</span>
  <div style="display:inline-block; float:right;">description<div>
<div>

 

     网上查了一下,找到了解决办法,在此记录一下。解决办法也很妖,就是把float:right对应的元素位置换到最前面,具体原因不清楚,可能是位置不同浏览器会有不同的理解和解析吧。  

 

<div>
  <div style="display:inline-block; float:right;">description<div>
  <span>logo</span>
  <span>name</span>
<div>
分享到:
评论

相关推荐

    CSS之float在IE浏览器下换行问题解决方法

    总结来说,a标签在IE浏览器下使用float属性出现换行的问题是由于浏览器之间的差异造成的。通过将a标签在HTML结构中提前可以解决这个问题,但更好的做法是利用现代CSS布局技术来避免这类问题的发生。随着Web标准的...

    CSS在IE6 IE7与FireFox下的兼容问题整理

    【CSS在IE6 IE7与FireFox下的兼容问题】 在Web开发中,CSS(层叠样式表)的兼容性问题一直是开发者面临的一大挑战,尤其是在早期的浏览器之间,如Internet Explorer (IE)的6、7版本和Firefox。这些浏览器对CSS标准...

    IE与Firefox的CSS兼容大全

    在网页设计中,CSS(层叠样式表)的兼容性是一个关键问题,特别是对于历史悠久的Internet Explorer(IE)和相对现代的Firefox浏览器。由于这两者对CSS标准的解析方式不同,开发者经常面临兼容性挑战。以下是一些针对...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...

    在IE和火狐浏览器下页面兼容性问题的处理(最完整篇

    在网页开发过程中,浏览器兼容性问题常常困扰着开发者,尤其是IE和Firefox之间的差异。这篇文章主要聚焦于CSS在这些浏览器下的兼容性处理,提供了一些实用的技巧和解决方案。 1. **垂直居中问题**:在CSS中,实现...

    firefox与ie css+div兼容大全

    在网页设计中,Firefox与IE(尤其是Internet Explorer)之间的CSS兼容性问题一直是开发者们面临的一大挑战。以下是一些常见的CSS兼容性问题以及解决方案: 1. **DOCTYPE的影响**:DOCTYPE声明会影响浏览器进入不同...

    ie和火狐浏览器兼容问题

    8. **链接的边框和背景色**:在Firefox中,要为链接添加边框和背景色,需要设置`display: block`和`float: left`以防止换行。若要避免底部显示错位,可以设置高度。 9. **盒模型的解释不一致**:Firefox和IE对盒...

    CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

    在网页设计中,CSS(层叠样式表)的浏览器兼容性问题一直是开发者面临的挑战,特别是针对Internet Explorer(IE)和Firefox这两个主流浏览器。本文将详细阐述一些针对IE和Firefox的CSS兼容性处理技巧。 首先,要...

    CSS兼容IE和Firefox的技巧集合

    CSS兼容性问题在Web开发中一直是个棘手的挑战,尤其是在处理IE(尤其是IE6、IE7)和Firefox之间的差异时。以下是一些针对这些浏览器兼容性问题的CSS技巧: 1. **垂直居中问题**: 当你需要一个div内容垂直居中时,...

    DIV背景图片在Firefox下不显示通过overflow:auto可解决

    标题提到的“DIV背景图片在Firefox下不显示通过overflow:auto可解决”就是一个典型的跨浏览器兼容性问题。 在Firefox中,当一个`div`元素包含浮动元素(如`float:left`或`float:right`),这个`div`元素本身可能...

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    IE浏览器和火狐浏览器兼容问题.doc

    标题提及的“IE浏览器和火狐浏览器兼容问题”主要集中在CSS样式方面,因为CSS在不同浏览器之间的解析方式有所差异,导致在Internet Explorer(IE)和Firefox中显示效果可能不一致。以下是一些关键的兼容性问题及解决...

    div+css_兼容ie6_ie7_ie8_ie9和FireFox_Chrome等浏览器方法

    为了在Firefox中为链接设置边框和背景色,需要设置`display: block`并使用`float: left`防止链接换行。此外,为了防止底部显示错位,还可以为链接和容器设置固定高度。 #### 8. 解决BOX模型差异 由于Firefox和IE对...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    Firefox中,链接添加边框和背景色需设置`display: block`和`float: left`,防止文字换行,并可能需要设定高度以避免底部错位。 8. **盒模型差异的解决**: 对于盒模型的解释不一致问题,可以使用条件注释或`*`...

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

    解决浏览器兼容问题的 CSS 语法技巧大全 ...解决浏览器兼容问题的 CSS 语法技巧大全涵盖了 IE 和 Firefox 浏览器的兼容性问题,提供了一些实用的解决方案,可以帮助 web 开发者更好地解决浏览器兼容性问题。

Global site tag (gtag.js) - Google Analytics