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正在生成您期望的HTML，但浏览器正在重写它以符合HTML标准。

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

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

和inline means：

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

如果您查看 fontstyle ，词组，特殊和 formctrl ，您将找不到{ {1}}或<div>位于其中任何一个列表中，因此<h3>和<a><div></div></a>都不是有效的HTML4。

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

允许的内容

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

Transparent content表示：

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


当元素 foo 是父元素 bar 的子元素时，其内容模型允许包含流元素，则内容   元素 foo 的元素也可能包含流元素

当元素 foo 是父元素 baz 的子元素时，其内容模型将其子元素限制为仅仅是措辞   元素，然后元素 foo 的任何子元素也受到限制   只是作为措辞元素

<a><h3></h3></a>是flow element但不是phrasing element，<div>也是流元素而不是短语元素。因此，如果您处于HTML5模式，那么您的<h3>将需要一个可以包含流元素的父元素。我不认为这适用;如果使用HTML5并且<a>的父级不允许使用流元素，我希望浏览器能够重新构建更多内容，它必须移动<a>和<div>提高一级以超越对措辞元素的限制。

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

你有一些选择：

查看HAML生成的HTML，不要询问浏览器，在浏览器可以执行任何操作之前查看原始输出。这将告诉你谁正在改变事物。
确保您的HTML呈现为HTML5。
重新构建HTML以符合相关标准，您可能需要在此补偿过时但过于热心的浏览器。这可能要求您在<h3>内使用<div>和<h3>以外的内容。

Answer 2

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

- 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

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

为什么HAML交换标签位置？

2 个答案: