解决IE7下设置float:right时元素自动换行异常情况

2016-5-14 00:11 来自本站原创 5,484 6 0
[摘要]

IE7浏览器下,本该并排显示的块状元素,添加了float:right属性后,浮动元素自动换行了,本文介绍解决办法。

不得不说IE是个让人又爱又恨的产品,对于前端开发者来说,IE系列版本的兼容性问题最令人头痛,今天笔者在工作中发现一个IE7下的浮动异常情况:本来想让两个块元素并排在一行,但在给右面的元素添加float:right属性后,右面的元素在IE7下换行了。

解决IE7下设置float:right时元素自动换行异常情况

程序猿眼中的IE浏览器

例如:

  1. <ul>
  2.   <li>我是左边/li>
  3.   <li class="test">我是右边</li>
  4. </ul>
  5. <style>
  6. ul li{display:inline-block;}
  7. .test{float:right}
  8. </style>

理想情况下左边和右边应该在一排,而在IE7下,右边会另起炉灶,另起一行。

原因分析

在部分浏览器下,当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥。

解决办法

1、将含有float属性的元素置于最前,也就是说将右边的<li>写到左边的<li>之前。

2、给非float元素添加float属性。

这样处理之后,页面就会在IE7下正常显示了。

本文最后更新于2016年10月13日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:6   其中:访客  5   博主  1
    加载中...
    1. 2年前 (2016-05-23) 5楼

      IE现在真觉得好卡好慢!

    2. 2年前 (2016-05-15) 4楼

      没有仔细折磨这个问题,博主正解 :razz:

    3. hanbing17 1
      2年前 (2016-05-15) 板凳

      路过看看 :smile:

    4. 2年前 (2016-05-15) 椅子

      我都直接放弃IE浏览器了,有问题也懒得修复了

    5. 2年前 (2016-05-14) 沙发

      现在几乎都已经抛弃了IE8以下的版本了

      • 飞鸟
        2年前 (2016-05-14)  地下1层

        @憧憬Licoy: 对于个人博客来说大可不必估计IE系列,但是对于公司页面,行业网站,IE7 甚至IE6都要顾忌

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    6 0 5,484
    Top
    天猫618粉丝狂欢节