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>

　　</li>

　　<li>

　　</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

转载于:https://www.cnblogs.com/mabelstyle/p/3849325.html

display:inline-block 间隙相关推荐

[CSS]详解display:inline | block |inline-block的区别
2019独角兽企业重金招聘Python工程师标准>>> [CSS]详解display:inline | block |inline-block的区别[点评网站][发布新闻][申请专栏 ...
display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
关于css的display:flex inline block inline-block和float
1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素):使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行, ...
display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
CSS中display：block、inline、inline-block
display:block的特点: 1.block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. 2.block元素可以设置width,heig ...
display:inline display:block
display:inline; 元素会被显示为内联元素,元素前后没有换行符. display:block 元素将显示为块级元素,此元素前后会带有换行符. 举例: 1.display:block < ...
CSS 中 display 的 block，inline，inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
display:inline inline-block block
块级元素:默认设置display:block的元素<div>.<h1>~<h6>.<p>.<ul>.<ol>.<li> ...

display:inline-block 间隙

display:inline-block 间隙相关推荐

最新文章

热门文章