1.在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生3px的间隙。
 解决办法:

　　1.给li加浮动

　　2.给li加vertical-align:top;

eg：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 .list{ width:300px;margin:0;padding:0;}

 .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; /* vertical-align:top; */}

 .list a{float:left;}

 .list span{float:right;}

 /*

     IE6，7下li的间隙

     在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

     解决办法: 1.给li加浮动

         2.给li加vertical-align:top;

 */

 </style>

 </head>

 <body>

 <ul class="list">

     <li>

         <a href="#">文字文字文字文字文字</a>

         <span>作者</span>

     </li>

     <li>

         <a href="#">文字文字文字文字文字</a>

         <span>作者</span>

     </li>

     <li>

         <a href="#">文字文字文字文字文字</a>

         <span>作者</span>

     </li>

     <li>

         <a href="#">文字文字文字文字文字</a>

         <span>作者</span>

     </li>

 </ul>

 </body>

 </html>

 2.vertical-align属性垂直对其方式

1.可以设置行内元素的对其方式

eg：注意（span1，span2都使用vertical-align）

 <style>

 .box{height:200px;border:2px solid #000; text-align:center;}

 .span1{ width:100px;height:200px;background:Red; display:inline-block; vertical-align:middle;}

 .span2{ width:200px;height:100px;background:blue; display:inline-block; vertical-align:middle;}

 </style>

 </head>

 <body>

 <div class="box">

     <span class="span1"></span>

     <span class="span2"></span>

 </div>

 </body>

2.可是清除图片下的空隙

eg：

 <style>

 .box{border:10px solid #000;background:red;}

 img{ /*vertical-align:top;*/}

 </style>

 </head>

 <body>

 <div class="box">

     <img src="img/pic.jpg" /><img src="img/pic.jpg" /><img src="img/pic.jpg" />

 </div>

 </body>

IE6,7下li标签的间隙的更多相关文章

  1. ie下li标签中span加float:right不换行问题解决方案

    在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...

  2. chrome下li标签onclick事件无效

    //绑定事件 $(document).ready(function () { $("ul").children().click(function () { clickLi(this ...

  3. li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. ie6,ie7下a标签无法点击（转载）

    前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常.一开始以为是z-index的问题,但不论z-index设置多 ...

  5. IE6 IE7下li间距、高度不一致问题(转)

    http://www.phpddt.com/dhtml/926.html 问题描述:li的高度在IE6 IE7间距高度和其他浏览器不一致,即便设定了高度,IE6,7中,仍比其他浏览器要高. 解决方法: ...

  6. 获取ul下li标签里点击的是哪一个li并获取li里a标签的值

    $("ul li").click(function(){ //获取当天月份 ).text(); ,) alert(month); }); <!doctype html> ...

  7. 解决IE6-IE7下li上下间距变大问题

    在IE6/7下li会向下产生大约2px的外边距 解决方法:li{vertical-align:top;}或者       li{vertical-align:bottom;} 解决问题!

  8. IE6下input标签border问题

    IE6下input标签的border的样式border:none;是不起作用的!要设置border:0px;才行!

  9. 空a标签 a标签空的情况下 IE6 IE7下点击无效

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

随机推荐

  1. CSLight研究院之学习笔记结合NGUI（一）

    原地址:http://www.xuanyusong.com/archives/3088 这两天一直在研究CSLight,目前Unity热更新的方式有两种,一种是ulua这个网上的例子已经很多了.还有一 ...

  2. mysql5日期类型datetime查询范围值

    1.DATE_FORMAT函数 SELECT a.create_time FROM account_log a WHERE a.create_time >= DATE_FORMAT('2014- ...

  3. vi/vim使用指北 ---- Sample Editing

    本篇介绍vim的基础操作,各种编辑模式的切换,光标的移动,删除,撤销/重做,保存,查找等基础命令: 基础操作 编辑文件 vim  [options] [file ...] 模式 打开文件后进入vim的 ...

  4. 【面试题043】n个骰子的点数

    [面试题043]n个骰子的点数 题目:     把n个骰子扔在地上,所有骰子朝上一面的点数之和为s, 输入n,打印出s的所有可能的值出现的概率.   n个骰子的总点数,最小为n,最大为6n,根据排列组 ...

  5. UPC 2224 Boring Counting （离线线段树，统计区间[l,r]之间大小在[A,B]中的数的个数）

    题目链接:http://acm.upc.edu.cn/problem.php?id=2224 题意:给出n个数pi,和m个查询,每个查询给出l,r,a,b,让你求在区间l~r之间的pi的个数(A< ...

  6. 【剑指offer】题目38 数字在排序数组中出现的次数

    思路: 应该是用二分查找分别找到该数字第一次和最后一次出现的位置,相减即可.O(logn) int findLeft(int a[], int n, int num) { , r = n - ; wh ...

  7. iOS-xib(自定义UITableViewCell)

    1.创建一个自定义的xib

  8. iOS打电话，发短信，发邮件，打开网址

    //调用自带mail [[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"mailto://admin@hzl ...

  9. HDU 2709 Sumsets（递推）

    Sumsets http://acm.hdu.edu.cn/showproblem.php?pid=2709 Problem Description Farmer John commanded his ...

  10. sql server 2008 修改sa密码

    问题: 当我们用windows本身验证之后需要修改sa密码,出现这样的错误. 解决方案: