DIV+CSS 内容浮动溢出

来源:百度知道 编辑:UC知道 时间:2024/05/27 02:26:11
如题. HTML格式为
<div>
<ul>
<li><a>标题标题标题</a></li>
<li><a>标题标题标题</a></li>
<li><a>标题标题标题</a></li>
<li><a>标题标题标题</a></li>
</ul>
</div>

仅在IE6下出现如下图内容溢出

IE6的bug
ie6会自动给div的宽度加20px;
可用如下的类似方法解决:
div{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
100px 80px 看自己的情况改。但要注意书写顺序加: important; /* IE7+FF */ 的 在上

引起原因:

  1. div部分没有在两个div后面清楚浮动,导致浮动溢出

确认方法:在包含两个div的父级处添加border来查看是否包含子级。

解决方法:

<div class="a"></div>

<div class="b"></div>

<div style="clear:both"></div>

其中<div style="clear:both"></div>是清除浮动的意思。

   2.宽度或者高度被限制,查看父级的最大高度和宽度是否设置了固定高度而子级的大小超过了最大限制。

解决方法:仔细查看即可。

3.JS影响。

一些JS的确会影响到页面布局问题,但是不经常出现。

确认方法:

去除一下JS后,看看有没有效果,如果没有,说明不是JS 的问题。

<style type="text/css">
.clear{
clear:both;}
</style>
<div>
<ul>
<li><a>标题标题标题</a></li>
<li><a>标题标题标题</a&g