Question

在我们从“psd2html”服务获得的代码中，我看到围绕div-tags内容的很多跨度。

我知道跨度和div之间的区别，但我无法弄清楚为什么代码看起来像这样：

<div class="forgot-password"> 
    <span><a href="/forgotpassword/">Forgot password?</a></span> 
</div> 
...
<div> 
    <span>Sign in</span> 
</div>

而不仅仅是：

<div class="forgot-password"> 
    <a href="/forgotpassword/">Forgot password?</a>
</div> 
...
<div> 
   Sign in
</div>

我猜它是某种跨浏览器修复，或者如果我们想把更多东西放入div中，或者为未来做“准备”？

修改这是忘记密码部分的CSS：

div.forgot-password
{
    float: left;
    width: 145px;
    height: 22px;
    margin-left: 3px;
}

div.forgot-password span
{
    display: block;
    float: left;
    padding-top: 3px;
    padding-left: 0px;
}

div.forgot-password span a
{
    color: #C5C5C5;
    text-decoration: none;
}

Answer 1

虽然纯文本在div中可以是“裸”，但有些人认为使用内联标记（如span）来包装文本内容是一种很好的做法。这意味着您可以从块样式中分离出内联样式。关于你的psd2html服务，你所看到的是转换算法的假象。任何算法只会有一套有限的规则。在这种情况下，我猜测有一个规则，如“在一个范围内包装文本”，以及一个规则，如“在a中包裹链接”。在上面的示例中，您的所有文字内容都是一个链接，因此您正在看

<span><a..>text content</a></span>

从HTML角度来看，在这种情况下，外部跨度是不必要的。然而，它不会造成任何伤害，并且为了造型目的 - 除非你想改变css - 你需要保留它们。

Answer 2

对我来说，它看起来像是过于复杂的代码。如果代码是：

，那将是有意义的

<div class="forgot-password"> 
    <span> some text </span> <a href="/forgotpassword/">Forgot password?</a>
</div>

这样你就可以区分CSS或jQuery中的文本和链接。

在这里我们应该看看CSS看看做了什么，但我的第一印象是可以删除跨度，因为它们没有添加语义或操作含义。

Answer 3

对我来说，span一直是以符合css标准的方式快速格式化文本的一种方式。所以我认为他们添加了跨度以准备进一步格式化，但由于没有给出格式，它们不应用任何样式表，因此跨度是“空的”。

我会说这些跨度也可以被删除。在这种情况下他们没有受伤，但他们在这里没有任何用处。

Answer 4

看起来这些是在这里标记的按钮，所以它可能用于Sliding Doors技术，所以你可以有两个背景图像，这样如果内容增长，你仍然会有很好的角落。它可能只是他们对所有看起来像纽扣的东西所做的事情，但他们可能无法在任何地方充分利用它。

围绕div中所有内容的跨度 - 为什么？

4 个答案: