为什么 HAML 交换标签位置？

Question

这个 HAML（带有链式助手）：

- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2 local3, local4 ) do
  %div{ style: helper_method_3(local5, local6) }
  %span= local7
  %h3{style: "color: black"}= local8

正在生成这个（倒置）HTML：

<div style="prop1: val:1; prop2: val2;"></div>
<span>Span Text</span>
<h3 style="prop3: val3;">H3 Text</h3>
<a class="class-value" id="id-value" href="href-value"></a>

但是如果我们去掉链式方法，比如：

(...)
- haml_tag :a, helper_method_1(local1, local2) do
(...)

比 HTML 按预期呈现：

<a class="class-value" id="id-value" href="href-value">
  <div style="prop1: val:1; prop2: val2;"></div>
  <span>Span Text</span>
  <h3 style="prop3: val3;">H3 Text</h3>
</a>

HAML 有什么问题？

Answer 1

通过更改此行解决了问题：

- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2 local3, local4 ) do

进入这一行（在 helper_method_2 上添加括号）：

- haml_tag :a, helper_method_1(local1, local2).merge( helper_method_2(local3, local4) ) do

这是一个不完整的答案。 请随意扩展/编辑它。

Answer 2

我猜 HAML 正在生成您期望的 HTML，但浏览器正在重写它以符合 HTML 标准。

让我们看看HTML4 has to say about <a>：

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

和inline means:

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

如果您查看 fontstyle、phrase、special 和 formctrl，您不会找到 @ 987654330@ 或 <h3> 在任何这些列表中，因此 <a><div></div></a> 和 <a><h3></h3></a> 都不是有效的 HTML4。

HTML5 has this to say about what an <a> can contain:

允许的内容

透明（短语内容或流式内容）

Transparent content 表示：

如果特定元素 foo 的内容模型被描述为 透明，意思是：

• 当元素 foo 是其内容模型允许包含流元素的父元素 bar 的子元素时，则内容 foo 元素也可以包含流元素
• 当元素 foo 是父元素 baz 的子元素时，其内容模型将其子元素限制为仅是短语 元素，则元素 foo 的任何子元素也受到限制 仅作为短语元素

<div> 是flow element，但不是phrasing element，<h3> 也是流元素而不是短语元素。因此，如果您处于 HTML5 模式，您的 <a> 将需要一个可以包含流元素的父元素。我认为这并不适用；如果正在使用 HTML5 并且 <a> 的父级不允许流元素，我希望浏览器能够更多地重组事物，它必须将 <div> 和 <h3> 再上一层才能获得超越了对短语元素的限制。

我猜你的浏览器认为它正在呈现 HTML4，或者它不是最新的 HTML5 所说的。

你有一些选择：

1. 查看 HAML 生成的 HTML，不要询问浏览器，在浏览器对其执行任何操作之前查看原始输出。这会告诉你谁在改变事情。
2. 确保您的 HTML 被呈现为 HTML5。
3. 重新构建您的 HTML 以匹配相关标准，您可能必须在此处补偿过时但过于狂热的浏览器。这可能需要您在 <a> 中使用 <div> 和 <h3> 以外的其他内容。