IE7中float:right会换行的解决办法

常见的标题显示布局方式:标题+发布日期。可发布日期掉到下一行去了,怎么解决?
 群友:IE7中,float : right;会换行,这个问题,除了加个*margin-top负边距,还有其他解决方案吗?

 假设原来的前端布局方式:

  1. <ul> 
  2. <li>这里是文章列表标题,我是奇葩的IE浏览器<span style="float:right">2015-07-17</span></li> 
  3. <li>这里是文章列表标题2,我是奇葩的IE浏览器<span style="float:right">2015-07-17</span></li> 
  4. </ul> 

 可是如果项目要兼容IE7及IE6,测试发现,日期在IE7浏览器里会掉到下一行去。解决IE7里右浮动元素换行的方法:

一、CSS hack解决IE7浮动元素的问题(不推荐)

加个*margin-top:负边距

二、调整html元素的布局方式解决IE7浮动元素的问题(推荐)

  1. <ul> 
  2. <li><span style="float:left">这里是文章列表标题,我是奇葩的IE浏览器</span><span style="float:right">2015-07-17</span></li> 
  3. <li><span style="float:left">这里是文章列表标题,我是奇葩的IE浏览器</span><span style="float:right">2015-07-17</span></li> 
  4. </ul> 
  1. <ul> 
  2. <li><span style="float:right">2015-07-17</span>这里是文章列表标题,我是奇葩的IE浏览器</li> 
  3. <li><span style="float:right">2015-07-17</span><这里是文章列表标题2,我是奇葩的IE浏览器/li> 
  4. </ul> 

注意发布日期的容器span元素的style浮动样式及显示的位置。

说明:前端布局的时候,能不使用css hack就尽量避免,况且本demo完全不需要css hack去解决IE7!

 

相关经验

导读书签
书签初始化中…