前端杂谈 · Web

解决两个相邻的span中间空隙的几种方式

•̀.̫•́✧ · 7月20日 · 2020年本文1271字 · 阅读4分钟17

第一种:设置父元素字体大小为0

思路:将父元素字体大小设置为0,子元素中设置字体正确大小,即可实现效果

div{
   font-size:0;
}
div span {
   font-size:16px;
}

第二种:span加float

<style>
   span{background: red;float:left}
</style>
<span>1</span>
<span>2</span>

第三种:使用注释

<style>
   span{background: red;}
</style>
<div class="wrap">
    <span>a</span><!--
      --><span>b</span>

第四种:设置负margin

<style>
    .wrap{font-size: 12px;}
   span{background: red;margin-right:-3px}
</style>
<div class="wrap">
    <span>a</span>
    <span>b</span>
</div>

这种解决方法并不完美,如果你的父元素设置的字号不一样,可能你的“-3px”就不能解决问题

第五种:丢失结束标签

<style>
   span{background: red;}
</style>
<div class="wrap">
    <span>a
    <span>b
</div>

这种方法虽然能达到各浏览器的兼容,但还是有一个前提,那就是“DOCTYPE”要选择对,在“XHTML”下可就问题又出来了。

第六种:兼容IE:font-size+负margin

#demo{
	*padding-left:1px;
	font-size:0;
}
#demo span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	*margin-left:-1px;
	font-size:14px;
}

针对IE7及以下浏览器hack,让每个inline-block的span元素向左负margin一个像素,借此修复IE7及以下浏览器下顽固的残留1px间隙问题。由于span向左margin了-1px,同时需将父元素#demo向左padding 1px,用于抵消位置偏移。

IE, Firefox, Opera, Safari6, Chrome18均可直接使用此方案;

第七种:兼容IE:font-size+word-spacing

#demo{
	*word-spacing:-1px;
	font-size:0;
}
#demo span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	word-spacing:normal;
	font-size:14px;
}

我们知道inline-block之间的间隙是因插入了空白换行或回车符所致,你可能很快就能想起有个word-spacing属性是用来处理单词间空白符的。针对IE7及以下浏览器hack,定义word-spacing为-1px,即可修复IE7及以下浏览器下顽固的残留1px间隙问题。

IE, Firefox, Opera, Safari6, Chrome18均可直接使用此方案;

0 条回应