gpt4 book ai didi

css - CSS 的 的区别?

转载 作者:太空宇宙 更新时间:2023-11-04 14:06:39 27 4
gpt4 key购买 nike

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

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

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

此代码呈现为:

enter image description here

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

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

此代码呈现为:

enter image description here

为什么要这样做?

有什么区别?

PS:在真实情况下,XSLT 呈现为带有菜单项的 ul。 block 跨度用于布局目的(背景图像);这就是为什么它有尺寸但没有内容。

最佳答案

自闭合 span 标签在 HTML 中不存在,浏览器会将其解释为无效的 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>

您可以通过右键单击您的测试页面,然后选择“检查元素”以使用网络工具来确认这一点,或者 Firebug如果你有安装。 inspector将显示浏览器已解释的 HTML 树。

关于css - CSS 的 <span></span> 与 <span/> 的区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9185255/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com