html - 为什么正确缩进后此 HTML 呈现不同？

Question

我有一个无序列表样式化为表格导航，需要如下所示: .为了给标签圆 Angular ，每个标签都有左、中、右 div 以及各自的 css 背景*。

---

当我像这样格式化列表项时(jsFiddle):

<li class="tab">
    <div class="item-wrap"><span class="item-before"></span><span class="item"><a href="inventories">Inventory</a></span><span class="item-after"></span></div>
</li>

我得到了想要的结果:

但是当我格式化 HTML 以使其更具可读性时，就像这样 ( jsFiddle ):

<li class="tab">
  <div class="item-wrap">
    <span class="item-before"></span>
    <span class="item">
      <a href="inventories">Inventory</a>
    </span>
    <span class="item-after"></span>
  </div>
</li>

渲染变化:

这是怎么回事？

---

* 注意:我知道这种方法已经过时了。 class I built this for限制我们使用 HTML 4 和 CSS 2。

Answer 1

我无法完全解释它，但它与 a 元素周围的空格有关...

这会正确呈现...

<span class="item"><a href="inventories">Inventory</a></span>

这不...

<span class="item"> <a href="inventories">Inventory</a> </span>

因此重新格式化 HTML，在 a 元素周围引入空格。