相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

演示: http ://jsfiddle.net/dGHFV/

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

CSS2.1规范要求overflow除了visible建立新的"块格式化上下文"之外.这让我觉得很奇怪,一个明显的目的是隐藏溢出而不影响布局的属性实际上确实会以一种主要方式影响布局.

看起来像溢出值除了visible组合两个完全不相关的特征之外:是否创建了BFC以及是否隐藏了溢出.它不像"溢出:隐藏"在没有BFC的情况下完全没有意义,因为浮动历史上可以溢出它们的父元素,隐藏溢出而不改变布局似乎是明智的.

这个决定背后的原因是什么,假设它们已知？那些参与规范工作的人是否描述了为什么决定这种情况？