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. ”sql Server2008 应用程序无法启动,因为应用程序的并行配置不正确。 找不到从属程序集。“C:\windows\SysWOW64\DTSPipelinePerf100.dll”的激活上下文生成失败“的解决方案

    一:控制面板->管理工具->事件查看器->windows日志->应用程序   查看错误原因: 二:在其他机子上拷贝一个DTSWizard.exe.config文件替换本机上已经 ...

  2. Java检查型异常和非检查型异常

    1.代码 public class ExcepTest { /** * @param args */ public static void main(String[] args) { System.e ...

  3. 解决Flash和html在多标签浏览器中互访问题

    在Flash播放器运行时,将不同来源的资源划分到独立的沙箱(sandbox)内,不同沙箱之间不能 彼此操作数据(除非目标沙箱做过一些设置,授权其他沙箱可访问),这就是Flash的跨沙箱问题.当Flas ...

  4. C#中反射泛型 CreateInstance

    假设1我有个类叫SortClass,类中有个BubbleSort(int[] array)用于给数组进行排序. 假设2我有个类叫SortT<T>,类中有个BubbleSort(T[] ar ...

  5. 深入浅出ES6（十一）：生成器 Generators，续篇

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 欢迎回到深入浅出ES6专栏,望你在ES6探索之旅中收获知识与快乐!程序员们在工作 ...

  6. cellspacing与cellpadding

    此文引用自cellpadding和cellspacing属性来控制表格边框的间距. 作者:nestea 巢(cell) -- 表格的内容 巢补白(表格填充)(cellpadding) -- 代表巢外面 ...

  7. linux下PostgreSQL数据库的源码安装

    实验环境>>>>>>>>>>>>>>>>>>操作系统:CentOS release 6.3 ...

  8. JavaPersistenceWithHibernate第二版笔记-第六章-Mapping inheritance-002Table per concrete class with implicit polymorphism(@MappedSuperclass、@AttributeOverride)

    一.结构 二.代码 1. package org.jpwh.model.inheritance.mappedsuperclass; import javax.persistence.MappedSup ...

  9. 两个C++对象是否相等，要程序员自己下定义，通常是覆盖==操作符

    我曾经好多年对Java的==和equals的区别和联系搞不清楚,后来搞清楚了,笔记在这里: http://www.cnblogs.com/findumars/p/3240761.htmlhttp:// ...

  10. ExtJs combobox支持模糊匹配

    其实很简单,我们只需要在创建下拉框时,给下拉框添加一个监听事件,代码如下:   //以下监听事件用于对下拉项进行模糊匹配                     ,listeners:{       ...