display:inline-block 间隙
IE6/7是不支持display:inline-block属性,只是让其表现的跟inline-block一样,尤其对于inline水平的元素,其表现度可以用perfect一词来形容了。
对于IE8+以及现代浏览器,直接使用:{display:inline-block;}就可以了,支持任意水平的元素。
对于不支持的IE6/7浏览器该怎么办呢?
如果是inline水平的元素(如a标签,span标签之类)跟上面一样,直接:{display:inline-block;}就可以了,对于这两个浏览器,其功效与*zoom:1;是一样的。
如果是block水平的元素,例如li标签。则需要多点代码,目前我知道的方法有两个,如下所示:li {display:inline-block;*display:inline;*zoom:1}
display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。
为了避免出现间隙,提供以下几种解决办法,这几种方法灵活运用:
代码实例:
li{display:inline-block;}
<ul>
<li>
<span>...</span>
</li>
<li>
<span>...</span>
</li>
</ul>
1.给 li 写font-size:0
2.把li标签写到一行,不要在编辑器里敲回车换行,但是这种写法对于标签很多的情况可读性太差,适用与例如<a></a><a></a>这样简单的结构
3.把li的标签改成这样的写法
<li>
<span>...</span>
</li><li>
<span>...</span>
</li> 如果想深度了解display:inline-block 推荐阅读:http://www.zhangxinxu.com/wordpress/?p=1194
display:inline-block 间隙的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
随机推荐
- python django -7 Git与项目
git的使用,主要包括: 本地仓库的命令 远程仓库的命令 项目需求.页面.模型类的设计,及页面的使用 Git简介 Git是目前世界上最先进的分布式版本控制系统 安装 sudo apt-get inst ...
- JavaScript中对象属性的加入和删除
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- .net 连接Redis
Redis安装 公司业务需要,弄了个类似于消息队列的东西,由客户端一直轮询取得信息.之前一直是走表的,但是效率以对表的使用都太过频繁,想试着用一下Redis,看看效率怎么样. 首先是安装Redis,这 ...
- 山石防火墙debug
debug dp basic debug dp snoop debup dp drop debug dp filter src-ip ? show logging debug
- ZOJ1311(Network)
题目链接:传送门 题目大意:给你一副无向图,求有多少个割点 题目思路:tarjan算法(此题读入是字符串读入,需注意) #include <iostream> #include <c ...
- 【BZOJ2226】[Spoj 5971] LCMSum 莫比乌斯反演(欧拉函数?)
[BZOJ2226][Spoj 5971] LCMSum Description Given n, calculate the sum LCM(1,n) + LCM(2,n) + .. + LCM(n ...
- TFS二次开发-基线文件管理器(4)-标签的创建
上一节已经完成了源码文件的读取,如果要将已经选择的文件保存为一个标签(Lable).在VS我们只能对一个目录做标签,非常的不方便.如果用下面的方法,将选择的文件路径保存为一个List在打标签,就非常的 ...
- iOS 关于自定义UICollectionViewLayout实现复杂布局
UICollectionView的简单介绍 UICollectionView的结构 Cells Supplementary Views 追加视图 (类似Header或者Footer) Decorati ...
- python四个带 key 参数的函数(max、min、map、filter)
四个带 key 参数的函数: max()点击查看详细 min()点击查看详细 map()点击查看详细 filter()点击查看详细 1)max(iterable, key) key:相当于对可迭代对象 ...
- 内置函数:sorted 用法
内置函数——sorted 对list.dict进行排序,Python提供了两个方法 对给定的List L进行排序,方法1: 用List的成员函数sort进行排序,在本地进行排序,不返回副本方法2: ...