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

最新推荐文章于 2024-09-09 15:01:35 发布

原创最新推荐文章于 2024-09-09 15:01:35 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#border #css #ie #div #float #c

HTML和WEB 同时被 2 个专栏收录

46 篇文章

订阅专栏

CSS

46 篇文章

订阅专栏

本文介绍了解决IE浏览器中出现的div边框断线问题的方法。当div内含有浮动元素时，IE浏览器可能会显示边框不完整。解决这个问题可以通过在浮动元素的父级CSS中设置高度或宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

2008-01-24 15:14 阅读36 评论0

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>