CSS解决IE中奇怪的左右border断线现象

CSS解决IE中奇怪的左右border断线现象

 

IE中奇怪的左右border断线现象

问题:如果div有border边框,且在div里有浮动元素,就会出现在IE里div的border断线现象:
解决:在浮动元素的父级元素的CSS中加入宽或高,如若是li元素浮动,就在ul中加入"height:1%"或"width:100%"

<style type="text/css">
 .list{
  border:#9c6 1px solid;
 }

 .list ul{
  list-style-type:none;
  /*width:100%;  解决方法1 */
  /*height:1%;   解决方法2 */
 }

 .list li{
  float:left;
 }
</style>

<div >
 <ul>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
 </ul>
</div>