无序列表ul在IE6、IE7中下边距bug

最新推荐文章于 2022-02-25 18:19:43 发布

tianyazjq

最新推荐文章于 2022-02-25 18:19:43 发布

阅读量101

点赞数

分类专栏： Web2.0学习文章标签： IE ASP 浏览器 C C++

本文链接：https://blog.csdn.net/tianyazjq/article/details/83364617

版权

Web2.0学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

实现超过宽度的时候的横向排列，逆向思维
1.外层box width短 overflow:hidden
2.内层box width长 overflow:hidden
3.ul,li在ie系列下margin-bottom bug,ie6在奇数时显现此bug


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
 *{ margin:0; padding:0}
 body{ font-size:12px; line-height:160%;}
 ul,li{ list-style:none}
 .c:after{ content:""; display:block; height:0; clear:both; vertical-align:hidden}
 .c{ zoom:1}
 .ullist_box{ width:684px; background-color:green; padding:0 8px 0; margin:0 auto; overflow:hidden;} 
 .ullist{ width:731px; overflow:hidden;zoom:1;}
 .ullist ul{ width:220px; float:left; height:100px; background-color:red;margin-bottom:15px; border:#ccc 1px solid; margin-right:20px; overflow:hidden;}


</style>
</head>

<body>
 <div class="ullist_box">
  <div class="ullist c2">
    <ul><div style="width:220px; background-color:blue; height:100px;">fd11</div></ul>
    <ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul>
    <ul><div style="width:220px; background-color:blue; height:100px;">fd11</div></ul>
    <ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul><ul><div style="width:220px; background-color:blue; height:100px;">fd11</div></ul>
    <ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul><ul><div style="width:220px; background-color:blue; height:100px;">fd11</div></ul>
    <ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul>
	 <ul><div style="width:220px; background-color:blue; height:100px;">fd222</div></ul>

  </div>
  </div>
</body>
</html>

解决方法：li---->>float-------->>display:inline;然后在对IE系列作* hack处理
2.如果是等间距换种方法：li用右上margin,ul用左下padding

具体参考此网址：http://www.52css.com/article.asp?id=907

看看人家的笔记在对付li列表排列的时候的处理，也是借用这种思路．


我们先创建一个示例片段：
<style type="text/css">
#menu{
    float:left;
}
</style>
<div id="menu">
    <ul class="wrap">
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
    </ul>
</div>

最优的清除浮动：
.wrap{zoom:1;}
.wrap:after{content:"";clear:both;display:block}

[color=red]但这样做有个问题要注意：用zoom:1的话,在ie7下面里面的元素如果有margin-bottom，那最下面的元素的margin-bottom会失效。[/color]

不是浮动引起的，，是ie在li列表排列的一个的一个bug,

所以最优、最精简的列表浮动样式是：
.wrap{zoom:1;padding:0 0 10px 10px;}
.wrap:after{content:"";clear:both;display:block}
.wrap li{float:left;margin:10px 10px 0 0;}

优点解释一下：
1.防止了ie7的margin-bottom的bug
2.防止了overflow和display:table的bug
3.最少的代码实现标签浏览器的清除浮动
4.防止了里面元素的双倍margin

tianyazjq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无序列表ul在IE6、IE7中下边距bug

实现超过宽度的时候的横向排列，逆向思维1.外层box width短 overflow:hidden2.内层box width长 overflow:hidden3.ul,li在ie系列下margin-bottom bug,ie6在奇数时显现此bug[code="java"]无标题文档 *{ margin:0; padding:0} body{ ...
复制链接

扫一扫

专栏目录