关于inline-block的间隙问题
2014-05-20 09:47
351 查看
很久之前写过一个星星评级的样式,当时开发人员在嵌套代码的时候出现很多问题,同样的一个样式有的页面正常有的页面就出现星星错位的问题,仔细研究了一下代码,发现问题原来出在了inline-block上。
目标样式:评级星星
实现手段:<span class="star"><span class='star1'></span></span>
相应样式:.star给一个灰色星星背景,display:inline-block使其支持宽高;
.star1给一个黄色星星背景,用width百分比来控制星星的个数,给一个display:inline-block使其支持宽高;
出现的问题:内部黄色的星星有向下错位现象,和外部span顶部大约有5px的上边距;
解决方案:最初是使用相对定位将内部黄色的星星相上top:-5px;这个问题时好时坏,有的时候没事,有的时候有事,初步分析和浏览器有关。
无意中将display:inline-block改成了display:block;发现问题解决了,两种颜色的星星完全重合,也不需要将黄色星星进行定位了。
总结:inline-block在使用的过程中会有间隙,不在特殊情况下尽量不用,需要inline就直接inline,需要block就直接block。
如果确实需要使用inline-block,那么去除间隙的方式有以下几种:
一:去除标签之间的空格和回车;
二:使用负边距;
三:给父级元素设置font-size:0,子集根据实际情况使用font-size。
本人比较常使用的方法是第三个,有的时候空格和回车是难免的,而且完全没有空格和回车的代码也比较难于看懂,至于第二个方法,只是不喜欢用。
另外,对于inline-block的间隙问题,有的时候其实是可以加以利用的,比如说有的分页需要一些小空隙,那就刚好可以使用这个方式。
目标样式:评级星星
实现手段:<span class="star"><span class='star1'></span></span>
相应样式:.star给一个灰色星星背景,display:inline-block使其支持宽高;
.star1给一个黄色星星背景,用width百分比来控制星星的个数,给一个display:inline-block使其支持宽高;
出现的问题:内部黄色的星星有向下错位现象,和外部span顶部大约有5px的上边距;
解决方案:最初是使用相对定位将内部黄色的星星相上top:-5px;这个问题时好时坏,有的时候没事,有的时候有事,初步分析和浏览器有关。
无意中将display:inline-block改成了display:block;发现问题解决了,两种颜色的星星完全重合,也不需要将黄色星星进行定位了。
总结:inline-block在使用的过程中会有间隙,不在特殊情况下尽量不用,需要inline就直接inline,需要block就直接block。
如果确实需要使用inline-block,那么去除间隙的方式有以下几种:
一:去除标签之间的空格和回车;
二:使用负边距;
三:给父级元素设置font-size:0,子集根据实际情况使用font-size。
本人比较常使用的方法是第三个,有的时候空格和回车是难免的,而且完全没有空格和回车的代码也比较难于看懂,至于第二个方法,只是不喜欢用。
另外,对于inline-block的间隙问题,有的时候其实是可以加以利用的,比如说有的分页需要一些小空隙,那就刚好可以使用这个方式。
相关文章推荐
- 关于inline-block,间隙距离去除,以及div自动换行,高度等问题的一个demo
- inline和inline-block的间隙问题
- inline-block间隙问题
- inline-block 属性的元素水平方向,垂直方向 间隙问题
- 关于inline-block问题
- inline-block元素间的间隙问题
- inline-block元素间的间隙问题
- inline-block元素间的换行符空格间隙问题
- 关于inline-block元素的行高问题
- 关于display inline-block的对齐问题
- inline-block布局出现间隙问题
- 解决li标签使用inline-block出现的间隙问题
- css中inline-block中间隙问题
- inline-block间隙问题内联元素与块级元素
- inline-block各浏览器兼容以及水平间隙问题解决方案
- 解决inline-block属性带来的标签间间隙问题
- inline-block产生空白间隙的问题
- inline-block在IE8,9的间隙问题
- 关于 inline-block 兼容问题