经常会遇到一种情况，那就是，我们需要把那些精美的图标放到一段文字的前面，把它做成精美的列表。。。 这时候，如果选择定位方式，不知道各位会选哪种？但是，有一点儿我可以肯定，如果你使用浮动把图片定位到文字之前或之后的话，可能会出现兼容性问题，怎么个情况呢？看我的电影列表：
- HTML code
<div style="border:1px solid black; font:14px Verdana; width:200px; padding:5px;"> The Lord of the Rings <span style="background:tomato; float:left;">*</span> <br/> <br/> Gone with the wind <span style="background:tomato; float:left;">*</span></div>
IE里貌似float元素都被行内元素挤到下面去了。
首先复习一下浮动的概念。看看这3节：
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之七：浮动(Float)概述
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一
【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之九：浮动(Float)定位细则二
其中规定了：如果一个元素浮动前是一个行内元素，则该元素浮动后，顶部应与其之前所在的行框顶部对齐。这是行框会被缩短。
很明显，IE 在此处的处理跟其他浏览器有所区别。它会将浮动元素贴着行框的底部放置，因此，浮动元素被折行放置。因此，经常有针对 IE 的做法是使用负的 margin-top 值将浮动元素抬高，有多高，自己控制。如果未考虑其他浏览器中的定位，那么，兼容性问题肯定会出现。
再试试多个元素的例子：
- HTML code
<div style="border:1px solid black; font:14px Verdana; width:500px; padding:5px;"> <span style="background:gold;">Text1</span> <span style="background:lightblue;">Text2</span> <span style="background:pink;">Text3</span> <span style="background:tomato; float:right;">Some text aligning right</span> <span style="background:greenyellow;">Text4</span> <span style="background:peru;">Text5</span></div>
那么，在Firefox中，什么情况下浮动元素会折行呢？
修改外层容器的宽度，看例子：
- HTML code
<div style="border:1px solid black; font:14px Verdana; width:300px; padding:5px;"> <span style="background:gold;">Text1</span> <span style="background:lightblue;">Text2</span> <span style="background:pink;">Text3</span> <span style="background:tomato; float:right;">Some text aligning right</span> <span style="background:greenyellow;">Text4</span> <span style="background:peru;">Text5</span></div>
可见，浮动元素会缩短行框的宽度以把自己放到跟行框顶部齐平的位置，如果行框无法被缩短，则会将浮动元素折行放置。
但是在IE6 IE7 IE8(Q)中却不是这样，无论行框中行内元素占据后剩下的宽度是否还够浮动元素用，都会折行，放置到其下。
解决方案可以看这里：http://www.w3help.org/zh-cn/causes/RM8005
原文章：http://www.w3help.org/zh-cn/causes/RM8005
更多兼容性问题：
【分享】浏览器兼容性问题目录
------解决方案--------------------------------------------------------
是什么奖？？
------解决方案--------------------------------------------------------
果断收藏学习。。。
------解决方案--------------------------------------------------------
收藏学习
------解决方案--------------------------------------------------------
收藏 研究。
------解决方案--------------------------------------------------------
值得收藏，好。
------解决方案--------------------------------------------------------
wo ding din gidn dg glmsafgsafd
------解决方案--------------------------------------------------------
恩，值得学习
------解决方案--------------------------------------------------------