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利用拷贝的方法实现导出excel（可以导出表格线）

    Js代码: <script language=javascript> function preview() { window.clipboardData.setData("Tex ...

  2. Activity学习（二）——生命周期

    一.什么是Activity? 简单的说:Activity就是布满整个窗口或者悬浮于其他窗口上的交互界面.在一个应用程序中通常由多个Activity构成,都会在Manifest.xml中指定一个主的Ac ...

  3. JAVA动态加载JAR包的实现

    如何动态的加载这些驱动!不可能把所有的数据库驱动都集成到JAR包中吧?!于是动态加载驱动的JAR包就产生了!其实这些在做系统基础代码时,经常用到,只是一般我们没有机会去搞而已. 动态加载JAR包,使用 ...

  4. URAL 1183 Brackets Sequence（DP）

    题目链接 题意 : 给你一串由括号组成的串,让你添加最少的括号使该串匹配. 思路 : 黑书上的DP.dp[i][j] = min{dp[i+1][j-1] (sh[i] == sh[j]),dp[i] ...

  5. POJ 1870 Bee Breeding（找规律）

    题目链接 题意 : 给你一个蜂巢状图形,让你找出两个点之间的距离. 思路 : 在做这个题之前可以看一下2265,因为是一种题来着,规律就是我在2265里写的那样,然后就是求距离了,求距离的时候只需考虑 ...

  6. MapReduce实例

    1.WordCount(统计单词) 经典的运用MapReuce编程模型的实例 1.1 Description 给定一系列的单词/数据,输出每个单词/数据的数量 1.2 Sample a is b is ...

  7. UVA 11076 Add Again 计算对答案的贡献+组合数学

    A pair of numbers has a unique LCM but a single number can be the LCM of more than one possiblepairs ...

  8. gitHub入门指导

    Github可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性.为一个项目贡 ...

  9. interviewbit :Min Steps in Infinite GridBookmark Suggest Edit

    You are in an infinite 2D grid where you can move in any of the 8 directions : (x,y) to (x+1, y), (x ...

  10. iOS开发--CornerStone上传静态库（.a文件）

    首先打开软件左上角 CornerStone-Preferences-SubVersion 第一个地方把对号去掉,第二个地方把.a那个删除,然后save. 然后把你的.a文件放到本地的相应文件夹下, 但 ...