Question

我在项目中反复使用<span class="class-name"></span>。像这样：

...
<span class="class-name"></span>
Some text generated here
<span class="class-name"></span>
Some text generated here
<span class="class-name"></span>
...

<span>的目的是拥有padding-right，以便之后的文字能够更好地展示。问题是Chrome浏览器无法呈现空<span>，因此会将其转换为以下内容：

<span class="class-name">
   Some text generated here
      <span class="class-name">
         Some text generated here
            <span class="class-name">
            </span>
      </span>
</span>

这不会导致我正在寻找的输出。因为填充物会混淆。有趣的是，如果你在标签之间添加一个字符，第一个视图将由浏览器呈现，问题就消失了。有谁能解释为什么它这样工作？

Answer 1

在重现错误时遇到了一些麻烦，但该代码似乎产生了它

<span class="class-name"/>
<p>Some text generated here</p>
<span class="class-name"/>
<p>Some text generated here</p>
<span class="class-name"/>

但是你的代码对我来说很好，你确定你是那么啰嗦，还是你使用了 xhtml tag closing

<span style="color:green"><span style="color:red"/> 
  If it's red, it's HTML. Green is XHTML.
</span>

浏览器将空span标记转换为自闭

1 个答案: