你的位置:快乐忆站 \ 前端 \ 文章正文

IE6/7 浮动元素换行 bug

最开始在写底部的TAB选项卡时碰到一个很诡异的问题,写在右边的浮动元素(阅读数和评论数)在IE6/7下莫名其妙的换行了,跑到下面去了,以前也不知道啥问题,只能通过css hack给右边的浮动元素设置负maigin-top来强制使他回到当前行,不过用了hack总觉得不是很好,作为一个前端,我想要找到一个更加完美的解决方案,终于在前段时间我找到了一个比较完美的方法,且听我慢慢分析来。

先给个示例代码,html:

<li><a href="http://xiaosong.org/win7/home-u-disk-boot-disk-to-install-win7">自制U盘启动盘安装Win7</a><span>阅:10964评:36</span></li>

css:

li span {
    float: right;
}

内容很简单,想要的效果如下:

但是,不幸的IE6/7死活会换行:

这里提供两个解决方案:

(一):将span标签移到最前面,IE6/7立马变乖了,不换行了。但是这个方法在渲染顺序上有些改变(可能破坏语义),不是特别完美(还可以通过定位来实现,但是代码量增加不少,不推荐也不演示了);

(二): 设置父元素的文本对齐方式为右对齐,然后将左边的a标签向左浮动,这样在不改变渲染顺序的同时又实现了我们想要的效果;

html代码不变(span标签可以省去),css代码改变如下:

li {
    text-align: right;
}
li a {
    float: left;
}

效果请查看demo

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 14#
    阿修
    阿修 Firefox 19.0 Windows 7 2013-04-01 21:36 回复
    这样解决的话(指第二种方法)如果span标签内的内容也是链接怎么办?我折腾模板时就遇到这个span的换行问题,最后用的别人提供的最原始方法:拿表格(一行两列)框起来,span就老实了…………
    小松
    小松 Google Chrome 26.0.1410.43 Mac OS X 10.8.3 2013-04-01 22:06 回复
    @阿修:当然,每种方法可能都会有瑕疵,不能满足所有情况,能解决问题就好~我也是提供一种思路罢了
  2. 13#
    qq空间背景音乐
    qq空间背景音乐 Internet Explorer 8.0 Windows XP 2011-12-06 22:15 回复
    主要还是装的XP系统自带IE6
    小松
    小松 Google Chrome 16.0.912.59 Windows 7 2011-12-07 10:42 回复
    @qq空间背景音乐:是的,XP消失了,IE6就不复存在了~
  3. 12#
    朵未
    朵未 Maxthon 3.0 Windows XP 2011-11-28 12:58 回复
    IE6.7都好久没用了。即使到网吧不网购的话也不用。
    小松
    小松 Google Chrome 16.0.889.0 Windows 7 2011-11-28 15:06 回复
    @朵未:没办法,IE6/7在中国还是有很大的份额的
  4. 11#
    该昵称已屏蔽
    该昵称已屏蔽 Google Chrome 14.0.835.202 Windows XP 2011-11-27 19:59 回复
    代码我不懂不知道应该怎么办啊!
  5. 10#
    huangjun
    huangjun Maxthon 2.0 Windows XP 2011-11-27 18:32 回复
    我现在也开始恨ie6了。
    小松
    小松 Google Chrome 16.0.889.0 Windows 7 2011-11-28 10:07 回复
    @huangjun:IE6太2了。。。
  6. 9#
    猜猜我是谁
    猜猜我是谁 Maxthon 3.3.1.600 Windows 7 2011-11-26 21:27 回复
    尼玛,评论内容会丢失?坑爹了
    小松
    小松 Google Chrome 16.0.889.0 Windows 7 2011-11-28 10:06 回复
    @猜猜我是谁:你是怎么丢的?难道是bug?
  7. 8#
    猜猜我是谁
    猜猜我是谁 Maxthon 3.3.1.600 Windows 7 2011-11-26 21:25 回复
    评论区赶紧去换个编辑器吧,目前这个很蛋疼,批量的信息回复无格式,看起来很吃力!
    小松
    小松 Google Chrome 16.0.889.0 Windows 7 2011-11-28 10:06 回复
    @猜猜我是谁:评论区就一个文本框,没有编辑器的,现在这个博客支持的评论标签不多的,所以弄个编辑器也没什么必要。。
  8. 7#
    猜猜我是谁
    猜猜我是谁 Maxthon 3.3.1.600 Windows 7 2011-11-26 21:24 回复
    小松同学,给你看看w3c css2.1的规范说明:A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is aligned with the top of the current line box.
    意思就是说:如果一个元素浮动前是一个行内元素,则该元素浮动后,顶部应与其之前所在的行框顶部对齐
    很明显在IE6/7下这是一个Bug,上面除了你提到的一些修复手段以外,其实也可以增加如下语句处理
    1)li a{ float: left; }
    2) 清除父元素的浮动,方法很多,就不细说了

    至于说那种方式更好,综合考虑吧,具体场景下具体分析!
    小松
    小松 Google Chrome 16.0.889.0 Windows 7 2011-11-28 10:05 回复
    @猜猜我是谁:应该是马卿哥吧~标准我没去看过,不过你提供的方法还是我的稍微简单一些~
  9. 6#
    随缘
    随缘 Firefox 8.0 Windows XP 2011-11-26 15:34 回复
    学习一下
  10. 5#
    XMChen
    XMChen Google Chrome 8.0.552.237 Windows 7 2011-11-26 12:47 回复
    我之前用过第一种方法。第二种我mark下啦....这种格局非常常用
    小松
    小松 Google Chrome 16.0.889.0 Windows 7 2011-11-28 10:10 回复
    @XMChen:是的,所以这个问题我一直在找最简单合理的办法,这个应该算是很简单的办法了
1 2

随机日志:

推荐日志:

彩色标签:

sitemap