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位置

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块的位置如图:

正确的ol位置

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

 

3 评论

发表评论

电子邮件地址不会被公开。