inline-block在IE8,9的间隙问题

    今天尝试制作tab效果时候，发现在IE8,9下，有个性的inline-block的元素在内容为空，或者内容是block的情况下，与下方block元素有间隙！在查询相关例子并实践发现，处理这种情况的解决方案是：设置inline-block的父元素font-size为零，然后再设置inline-block的字体大小。

现象截图：

解决代码：

	<style>
	body,ul,li{padding:0;margin:0;}
	.clearfix:after{content:"";clear:both;display:block;}
	li{float:left;list-style:none}
	a{color:#000;text-decoration:none;}
	.tab{width:500px;margin:40px auto;font-size:0}
	.tab-titles{position:relative;bottom:-1px;padding-left:5px;border-right:1px solid #000;display:inline-block;font-size:14px;}
	.tab-titles li a{display:block;width:50px;text-align:center;border:1px solid #000;border-right:none;}
	.tab-titles li a.active{border-bottom:1px solid #fff;}
	.tab-contents{padding:20px 0;border:1px solid grey;}
	</style>
	<div class="tab">
		<div class="tab-titles clearfix">
			<li><a class="active" href="javascript:;">tab1</a></li>
			<li><a href="javascript:;">tab2</a></li>
			<li><a href="javascript:;">tab3</a></li>
		</div>
		<div class="tab-contents clearfix">
			
		</div>
	</div>

效果截图：

这篇文章是为了个人能更好的理解、记忆此类问题，并希望对你有所帮助。

在这里，我使用inline-block的原因是为了解决tab标签的边框重复问题，可能你有更好的解决方案，欢迎赐教。

QQ：631954058;

weibo : http://weibo.com/u/3915918139