CSS 的 与 的区别？答案

【问题标题】：Difference versus for CSS?CSS 的 与 的区别？
【发布时间】：2012-02-08 10:07:44
【问题描述】：

仍在尝试让新网站的导航控制按我想要的方式工作。

我将我的问题简化为这段代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <style>
        span { display: inline-block; height: 50px; vertical-align: top; background-color: Yellow; } 
        span.block { background-color: Red; width: 15px; }
    </style> 
</head> 
<body>
    <span class="block"></span><span>A B C D</span>
    <span class="block"></span><span>E F G H</span>
</body> 
</html>

此代码呈现给：

但是，跨度是从 Umbraco 中的 XSLT 生成的。即使源声明它也会像这样生成：

<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>

此代码呈现给：

为什么要这样做？

和有什么区别？

PS：实际上，XSLT 呈现给带有菜单项的 ul。块跨度用于布局目的（背景图像）；这就是它有尺寸但没有内容的原因。

【问题讨论】：

标签： css web html

【解决方案1】：

HTML 中不存在自关闭 span 标签，浏览器会将其解释为无效 HTML 并猜测您的意思。

在这种情况下，它可能是这样处理的：

<span class="block" /><span>A B C D</span>
<span class="block" /><span>E F G H</span>

作为：

<span class="block"><span>A B C D</span>
<span class="block"><span>E F G H</span></span></span>

您可以通过右键单击您的测试页面来确认这一点，然后选择 Inspect Element 以使用 Web 工具，或 Firebug（如果您已安装该工具）。 inspector 将显示浏览器解释的 HTML 树。

【讨论】：

并非总是如此 - 它取决于 DOCTYPE - 请参阅 stackoverflow.com/questions/2816833/…。为了好玩，请尝试在原始问题中设置跨度的高度，而不是宽度，并查看非常随机的行为（至少在 IE 中！）。好吧，它并不是真正随机的，因为如果块级元素是空的，除非它们有高度，否则它们不应该被渲染，但是它是一个跨度的事实使事情变得复杂。编写 HTML 解析器一定很有趣！
@dash：该示例告诉浏览器将页面视为 xhtml 而不是 html，因此如果 NetWave 无法修复 XSLT，它可能是一个解决方案。我想在依赖它之前仔细检查浏览器支持，我更喜欢 html5 解决方案。
一个简单的解决方案可能是更改 XSLT，使其呈现或类似内容。没有看到 XSLT 就很难知道。或者将这些元素更改为 DIV，当它为空但指定了高度时，其行为方式似乎是 OP 想要的。
道格拉斯是正确的！跨度像他的示例中一样嵌套，这解释了为什么它呈现它的方式。现在一切都说得通了！我会研究 XSLT...谢谢大家。

【解决方案2】：

我不明白您为什么需要使用 块来进行布局？为什么不直接向（或者更合适的<div>）添加一个类并应用左填充和背景图像？

.my-class {
    padding-left: 15px;
    background: url(images/my-image.png) no-repeat 0 50%;
}

【讨论】：

其实我已经在这样做了，但我需要在另一边也有同样的效果。考虑一个具有可变宽度的圆角标签。使用您的代码，我只能显示一个角落。跨度是我的示例，用于另一个角落。
取决于圆角在您的设计中的重要性（有时我们别无选择），但是我很幸运地说服了一些客户不要挂在解决方案。尽管 IE8 确实支持 :after CSS 伪元素。也许您可以使用该伪元素附加到列表的末尾？