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. 使用 polyfills 的简易方法

    本文作者为 Andrew Betts 与 Robert Nyman.Andrew 是金融时报(Financial Times)实验室主任,该实验室旨在金融时报开发并推广实践性的 Web 技术.Robe ...

  2. Ruby探针的基本实现原理

    李哲 - MAY 13, 2015 语言本身 Ruby语言支持语法级别的系统,框架,甚至语言本身的方法复写,一般叫做元编程(meta programming), 此基础之上还有一些术语为mixin,方 ...

  3. 分布式数据存储 - MySQL主从复制高可用方案

    前面几篇文章说道MySQL数据库的高可用方案主从复制.主从复制的延迟产生原因.延迟检测及延迟解决方案(并未从根本上解决),这种主从复制方案保证数据的冗余的同时可以做读写分离来分担系统压力但是并非是高可 ...

  4. iOS导航栏-导航栏透明

    设置一张透明图片:nav_bargound.png  //导航栏背景     [self.navigationController.navigationBar setBackgroundImage:[ ...

  5. sql server 函数

    1.Fun_Split 分割字符串,形成返回表 CREATE FUNCTION [dbo].[Fun_Split] ( @Items VARCHAR(MAX), @SplitStr VARCHAR(M ...

  6. 为什么toString方法可以用来区分数组和对象？

    首先大家都应该知道在javascript中只有是对象都存在toString方法,将调用该方法的值转换为字符串返回,如下: var arr = [1, 2, 3]; console.log(arr.to ...

  7. MyEclipse — Maven+Spring+Struts+Hibernate 整合 [学习笔记-4]

    引入Hibernate 在pom.xml中加入jar包引用 <!-- hibernate4 --> <dependency> <groupId>org.hibern ...

  8. hdu 4764 Stone (巴什博弈，披着狼皮的羊，小样，以为换了身皮就不认识啦)

    今天(2013/9/28)长春站,最后一场网络赛! 3~5分钟后有队伍率先发现伪装了的签到题(博弈) 思路: 与取石头的巴什博弈对比 题目要求第一个人取数字在[1,k]间的某数x,后手取x加[1,k] ...

  9. haproxy重启

    ps -aux | grep haproxy.cfg sudo kill -9 pidsudo /data/tools/haproxy/sbin/haproxy -f /data/tools/hapr ...

  10. iOS开发--appstore应用上架

    除了企业级的应用,一般一个应用开发完成后,都会上架App Store.其实上架流程并不繁琐,麻烦的是要耗时等待审核,如果被拒,修改后又需要等待.被拒的原因很多(真的很多…),比如程序有崩溃,适配没做好 ...