Question

为什么我的'footer_links'跨度提前结束（在删除button_to之前）：

%p
  %br
  %span.footer_links
    = link_to 'Edit', edit_link_path(@link)
    |
    = button_to 'Delete', @link, :confirm => 'Are you sure?', :method => :delete

产生了这个：

<p>
<br/>
<span class="footer_links">
<a href="/links/354/edit">
<a href="/links/354/edit">
 | 
</span>
</p>
<form method="post" action="/links/354" class="button_to">
<div>
<input name="_method" type="hidden" value="delete"/>
<input data-confirm="Are you sure?" type="submit" value="Delete"/>
<input name="authenticity_token" type="hidden" value="MvN6K03y5WcqSZRt4Au3zj+xsKhfZ9EEtkf2M7YCGhk="/>
</div>
</form>

Answer 1

根据“mu太短”的答案，将您的p和span元素更改为div（或其他有效HTML的内容）：

%div
  %br
  .footer_links
    = link_to 'Edit', root_path
    |
    = button_to 'Delete', current_user, :confirm => 'Are you sure?', :method => :delete

我猜你从Chrome（或Safari或Firefox / Firebug）开发者工具中的Elements（aka DOM）浏览器中获得了“源”。这与查看HAML呈现的原始源不同。浏览器会解析您的（无效）源，它会尝试构建它可以使用的最佳DOM，当您浏览DOM时，开发人员控制台会将其作为文本转储出来。

开发人员控制台中的文本表示很少与原始源相同，特别是如果您的源无效。当您尝试调试渲染错误时，请不要盯着这么多层的纱布。从浏览器菜单中选择“查看来源”。

Answer 2

我猜你的HAML实际上是在做这样的事情：

<p>
  <br/>
  <span class="footer_links">
    <a href="/links/354/edit">...</a>
     | 
    <form method="post" action="/links/354" class="button_to">
      <div>
        <input name="_method" type="hidden" value="delete"/>
        <input data-confirm="Are you sure?" type="submit" value="Delete"/>
        <input name="authenticity_token" type="hidden" value="MvN6K03y5WcqSZRt4Au3zj+xsKhfZ9EEtkf2M7YCGhk="/>
      </div>
    </form>
  </span>
</p>

但那不是有效的HTML：you cannot put a <div> (or <form>) inside a <p>。因此，当浏览器尝试解析HTML时，它会注意到它不是有效的HTML并尽力纠正您的HTML。最简单的更正方法是将有问题的<form>元素推到<p>之外，并在此过程中关闭<span>和<p>元素，从而产生（有效的HTML）结构像这样：

<p>...</p>
<form><div>...</div></form>

这看起来很像你所看到的。

解决方案是使用有效的HTML，也许您可以使用<div class="p">而不是最外面的<p>，并调整CSS以使div.p看起来像p。您还必须像<span>一样替换<p>之后的{{1}}。

Answer 3

完全猜测，但你在缩进中混合了空格和制表符吗？看起来HAML将button_to标记解释为与％p标记在同一级别缩进，所以我想知道是否有一个标签可能被解释为空格。

HAML文档说你不能在缩进中混合制表符和空格，但它没有说明这是否会引发错误或显示为意外行为。

rails haml span正在“早期”结束 - 为什么？

3 个答案: