E7浏览器下,本该并排显示的块状元素,添加了float:right属性后,浮动元素自动换行了,本文介绍解决办法。
不得不说IE是个让人又爱又恨的产品,对于前端开发者来说,IE系列版本的兼容性问题最令人头痛,今天王小优在工作中发现一个IE7下的浮动异常情况:本来想让两个块元素并排在一行,但在给右面的元素添加float:right属性后,右面的元素在IE7下换行了。
程序猿眼中的IE浏览器
例如:
- <ul>
- <li>我是左边/li>
- <li class="test">我是右边</li>
- </ul>
- <style>
- ul li{display:inline-block;}
- .test{float:right}
- </style>
理想情况下左边和右边应该在一排,而在IE7下,右边会另起炉灶,另起一行。
原因分析
在部分浏览器下,当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥。
解决办法
1、将含有float属性的元素置于最前,也就是说将右边的<li>写到左边的<li>之前。
2、给非float元素添加float属性。
这样处理之后,页面就会在IE7下正常显示了。
- 我的微信
- 微信扫一扫
-
- 我的微博
- 微博扫一扫
-
评论