UL,OL前有float元素导致定位bug

示例代码：

<p style="float:left; width:300px;margin-right:30px;">

<img src="xxx.jpg" alt="测试float与ol" />

</p>
 <ol>
      <li>首先打开动作面板点右边的下拉菜单,选择载入动作</li>
      <li>选择要载入的动作文件</li>
      <li>载入后我们就可以在动作面板下面找到刚才载入的动作。</li>
 </ol>

此时会看到下图中的效果：

ol里的内容会出现在p的右边，但整个OL块的位置其实是图中一样，left是顶着页面左边而非它前面的p元素的右边，此时p的margin对ol也会无效，所以可以看到，ol本身的序号都被挡住了。

这个时候给ol也加上float:left就可以正常了。但大部分时候这个float是本来不应该加的，而且会导致ol后面的元素定位错误。

这个问题看起来很无厘头，而且所有浏览器都这样，可以排除兼容性问题。

但解决这个问题也非常简单：给ol加上overflow，可以是auto或者hidden，但不能是visible(默认)。为了兼容IE，还得加上zoom:1.

完整CSS代码：

ul,ol{overflow:auto;zoom:1;}

此时在所有浏览器都正常了，ol块的位置如图:

问题解决了，最后吐槽几句：解决这个问题的过程，是因为我用英文方式搜索到的国外网站上的结果，我也试过搜索“ul前的float元素”类似的，但都找不到想要的答案。对此我表示很无奈。

 

本文链接: http://www.jo2.org/204.html.转载请保留.