0

这个 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 有什么问题？

4

2 回答 2

2

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

让我们看看HTML4 是怎么说的<a>：

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

和内联意味着：

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

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

<a>HTML5 对 an可以包含的内容有这样的说法：

允许的内容

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

透明内容意味着：

如果特定元素foo的内容模型被描述为 transparent，则意味着：

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

A<div>是一个流元素而不是一个词组元素，<h3>也是一个流元素而不是一个词组元素。因此，如果您处于 HTML5 模式，您<a>将需要一个可以包含流元素的父元素。我认为这并不适用；<a>如果正在使用 HTML5 并且' 的父级不允许流元素，我希望浏览器能够更多地重组事物，它必须将<div>and<h3>向上移动一个级别以超越对短语元素的限制。

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

你有一些选择：

  1. 查看 HAML 生成的 HTML，不要询问浏览器，在浏览器对其执行任何操作之前查看原始输出。这将告诉你谁在改变事情。
  2. 确保您的 HTML 被呈现为 HTML5。
  3. 重新构建您的 HTML 以匹配相关标准，您可能必须在此处补偿过时但过于狂热的浏览器。这可能需要<div>您<h3>在<a>.
于 2013-01-08T18:28:30.630 回答
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

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

于 2013-01-08T19:12:14.647 回答