相关疑难解决方法(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解决吗？

的W3C验证不喜欢自闭合标签(那些与"端/>")上非空元素.(Void元素是那些可能不包含任何内容的元素.)它们在HTML5中仍然有效吗？

可接受的 void元素的一些示例:

<br />
<img src="" />
<input type="text" name="username" />

被拒绝的非虚元素的一些例子:

<div id="myDiv" />
<span id="mySpan" />
<textarea id="someTextMessage" />

注意: W3C验证器实际上接受无效的自动关闭标签:由于简单的拼写错误(\>而不是/>),作者最初遇到了问题.但是,自动关闭标签在HTML5中通常不是100%有效,并且答案详细说明了各种HTML风格的自闭标签问题.