Question

我正在尝试生成一个隐藏的div，里面有一个rails部分。我的目的是使用隐藏的div作为fancybox的目标，在弹出窗口中打开编辑表单。我的部分代码如下：

<div style="display:none">
      <div id="inline-edit-form-<%=feed_item.id%>" class="inline-edit-form">
        <%= form_for (feed_item) do |f| %>
              <%=render :partial => 'calendars/form', :locals => { :f => f }%>
       <% end %>
       </div>
  </div>

现在，在Chrome中，布局符合预期，并且最初隐藏部分。当点击源链接并且工作正常时，Fancybox设法渲染此部分。但在Firefox中，隐藏的DIV默认情况下不会隐藏，并且会显示所有控件。我在Chrome和Firefox上检查了HTML DOM结构，但存在巨大差异。 Chrome中的标记（正确）：

<div style="display:none">
  <div id="inline-edit-form-596" class="inline-edit-form">
     <form accept-charset="UTF-8" action="/calendars/596" class="edit_calendar"   d="edit_calendar_596" method="post"></form>
  <div style="margin:0;padding:0;display:inline">
     <input name="utf8" type="hidden" value="✓">
     <input name="_method" type="hidden" value="put">
     <input name="authenticity_token" type="hidden" value="">
  </div>
  <div>
      <label for="calendar_event">Event</label><br>
      <input class="inline-edit-input" id="calendar_event" name="calendar[event]" size="30" type="text" value="Interesting event">
  </div>

以上标记是正确的，也是预期的。 Firefox中令人震惊的标记是：

<div style="display: none;">
      <div class="inline-edit-form" id="inline-edit-form-598">
       </div>
</div>
<div style="margin: 0pt; padding: 0pt; display: inline;"></div>
<div>
    <label for="calendar_event">Event</label><br>
    <input type="text" value="Another interesting important event" size="30"  
           name="calendar[event]" id="calendar_event" class="inline-edit-input">
</div>

此标记不仅不正确，甚至根本不渲染FORM标记。我检查并重新检查了我的CSS和DOM结构，但Firefox只是选择拧紧布局。

任何帮助？

Answer 1

感谢您的提示。有一个验证错误修复了错误。错误是我在桌子里面。将隐藏的div移到桌子外面之后，问题就解决了。

部分在Firefox中呈现错误

1 个答案: