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

王小优
王小优
王小优
231
文章
0
评论
2015年11月28日
评论
5,030 496字阅读1分39秒

E7浏览器下,本该并排显示的块状元素,添加了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下正常显示了。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
Safari罕见BUG 数字在a标签下display:none;无效 HTML

Safari罕见BUG 数字在a标签下display:none;无效

王小优在项目中发现一个非常罕见的BUG,某些数字在不规范的a标签中,在手机端Safari浏览器上会出现display:none;无效。 浏览器兼容性一直以来都是令前端工作人员头疼的一个问题,特别是当前...
HTML中引入CSS的四种常用方法及各自的缺点 CSS

HTML中引入CSS的四种常用方法及各自的缺点

在WEB前端开发中最基本是就是HTML+CSS了,HTML就好比是骨架,CSS就是皮肉,那么你知道在HTML中引入CSS有哪些方法以及各自的缺点么? 在WEB前端开发中最基本是就是HTML+CSS了,...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: