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. javascript实现数据结构与算法系列：队列 -- 链队列和循环队列实现及示例

    1 队列的基本概念 队列(Queue):也是运算受限的线性表.是一种先进先出(First In First Out ,简称FIFO)的线性表.只允许在表的一端进行插入,而在另一端进行删除. 队首(fr ...

  2. socket网络编程中read与recv区别

    socket网络编程中read与recv区别 1.read 与 recv 区别 read 原则: 数据在不超过指定的长度的时候有多少读多少,没有数据则会一直等待.所以一般情况下:我们读取数据都需要采用 ...

  3. https://google-developers.appspot.com/chart/

    https://google-developers.appspot.com/chart/

  4. photosop快速对白色背景图片进行抠图

    因为其中有个作业,做个图书馆的小网页.所以打算取图书馆logo上面那几个字. 图片如下: 因为是白色背景,一开始打算使用魔棒工具,不过效果不好. 后来百度了下,使用色彩范围可以快速抠图 打开photo ...

  5. css系列-段落首字符下沉、缩进及特殊显示

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 三、Android NDK编程预备之Java jni入门创建C/C++共享库

    转自: http://www.eoeandroid.com/thread-264971-1-1.html 应网友回复,答应在两天前要出一篇创建C/C++共享库的,但由于清明节假期,跟朋友出去游玩,丢手 ...

  7. redis命令参考

    http://doc.redisfans.com/ 进入redis命令行模式方式: 1.进入redis安装目录 2.运行redis-cli

  8. C#网页采集

    /// <summary> /// 返回提取数组 /// </summary> /// <param name="rex">正则</par ...

  9. 网络处理2-异步POST请求和同步请求

    一.异步POST请求 假如请求路径是http://192.168.1.102:8080/MJServer/login,请求参数有2个: username :母鸡 pwd :123 1.POST请求细节 ...

  10. hdu 1515 Anagrams by Stack

    题解: 第一:两个字符不相等(即栈顶字符与目标字符不相等):这种情况很容易处理,将匹配word的下一个字符入栈,指针向后挪已为继续递归. 第二:两个字符相等(即栈顶字符与目标字符相等):这种情况有两种 ...