50% 内联块未彼此相邻显示

说我有

<span class="ib-half"></span>
<span class="ib-half"></span>

and

.ib-half {
    display: inline-block;
    width: 50%;
}

我希望这两个跨度并排显示，但它们不会。没有边距、内边距或边框，那么有什么问题呢？

设置字体大小父元素为零可能是一个修复。

HTML :

<div class = "parent">
    <span class="ib-half">Left</span>
    <span class="ib-half">Right</span>
</div>

CSS:

span{
    background:#bdbdbd;
}

.ib-half {
    display: inline-block;
    width: 50%;
    font-size:10px;
}

.parent {
    font-size: 0;
}

检查这个小提琴。http://jsfiddle.net/YpTMh/9/

更多选项请参考http://css-tricks.com/fighting-the-space- Between-inline-block-elements/