Fatal编程技术网
  • css/
  • 差异<；span></span>；与<；span/>；对于CSS？

差异<；span></span>；与<；span/>；对于CSS？

css web html

差异<；span></span>；与<；span/>；对于CSS？,css,web,html,Css,Web,Html,仍在尝试以我想要的方式获得新站点的导航控制 我将问题简化为以下代码： <!DOCTYPE html> <html> <head> <title>Test</title> <style> span { display: inline-block; height: 50px; vertical-align: top; background-color: Yellow; }

仍在尝试以我想要的方式获得新站点的导航控制

我将问题简化为以下代码：

<!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> 


试验
span{显示：内联块；高度：50px；垂直对齐：顶部；背景色：黄色；}
span.block{背景色：红色；宽度：15px；}
A、B、C、D
E F G H
此代码呈现为：

但是，跨度是从Umbraco中的XSLT生成的。即使源声明它生成如下内容：

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

A B C D
E F G H
此代码呈现为：

为什么要这样做

和之间有什么区别

PS：实际上XSLT通过菜单项呈现给ul。块跨度用于布局（背景图像）；这就是为什么它有维度但没有内容。

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

在这种情况下，它可能正在处理：

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

A B C D
E F G H
作为：

A B C D
E F G H
您可以通过右键单击您的测试页面，然后选择Inspect元素来使用web工具，或者如果您已经安装了该工具，来确认这一点。在浏览器解释HTML树时，将向您显示该树。

我不明白您为什么需要使用
块进行布局？为什么不在
（或者更合适的是
）中添加一个类并应用左填充和背景图像呢

.my-class {
    padding-left: 15px;
    background: url(images/my-image.png) no-repeat 0 50%;
}
不总是正确的-它取决于DOCTYPE-请参阅。为了好玩，试着在原始问题中设置跨度的高度，而不是宽度，然后看看非常随机的行为（至少在IE中！）。这并不是随机的，因为块级元素如果是空的，就不应该渲染，除非它们有一个高度，但事实上，它是一个跨度，这使问题变得复杂。编写HTML解析器一定很有趣@dash：该示例告诉浏览器将页面视为xhtml而不是html，因此如果NetWave无法修复XSLT，它可能是一个解决方案。在此之前，我想再次检查浏览器支持，我更喜欢html5解决方案；或类似的。如果没有看到XSLT，就很难知道。或者将这些元素更改为DIV，当为空但指定了高度时，DIV的行为符合OP的要求。道格拉斯是正确的！跨距像他的示例中那样嵌套，这解释了为什么它以这种方式渲染。现在一切都有意义了！我将研究XSLT。。。谢谢大家。事实上，我已经在做这个了，但我需要在另一边有同样的效果。设想一个具有圆角且宽度可变的选项卡。用你的代码我只能显示一个角。我的例子是另一个角的跨度。这取决于圆角在您的设计中的重要性（有时我们没有选择），但是我很幸运地说服了一些客户不要挂断电话 
.my-class {
    padding-left: 15px;
    background: url(images/my-image.png) no-repeat 0 50%;
}