IE/Firefox对于float的不同解析

通常我都是采用<li>中加入<cite>，然后把<cite>浮动到右边，来实现左边是标题右边是作者的效果，社区很多地方都是这样实现的。

最近在页面调整，为整个页面增加一些细小的元素来美化整个页面。这样就在标题左边加上一个图标，可是就是这么一个小图标加上去，就发现float在右边的<cite>元素在Firefox中全部消失了，而在IE中却乱七八糟的叠在一起。

一个图标就能引发这么严重的显示问题。首先想到的是CSS问题，修改了无数方法和显示格式，都不能解决，除掉图标就恢复正常了。后来经过多次调试，发现原来是IE和FF对float解析的问题。IE认为指定了float的元素A旁边如果有未指定float的块元素B，则A元素占有绝对高度和宽度，B元素的宽度自动缩减；而FF则认为A元素不应该占有绝对高度和宽度，相应的旁边的B元素的宽度不应该全部缩减，仍然应该体现“浮动”的实际意义，宽度该缩减就缩减，不该缩减就继续铺满。

既然是这样，把图标的位置调整一下就玩万事大吉了！

如：
原来：<ul><li><cite>逍遥哥哥</cite>IE/Firefox对于float的不同解析</li></ul>
有问题：<ul><li><img src=""><cite>逍遥哥哥</cite>IE/Firefox对于float的不同解析</li></ul>
没问题：<ul><li><cite>逍遥哥哥</cite><img src="">IE/Firefox对于float的不同解析</li></ul>