部分的なレンダリングがFirefoxで正しく行われていません

Question

内部にレール部分がある隠しdivを生成しようとしています。私の意図は、fancyboxのターゲットとしてその隠しdivを使用して、ポップアップで編集フォームを開くことです。 私の部分のコードは次のようになります。Chromeで、

<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> 

さて、レイアウトが意図したとおりであると部分が最初に隠されています。 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

ヒントをお寄せいただきありがとうございます。エラーを修正した検証エラーが1つありました。エラーは私がテーブルの中に含まれていたことでした。テーブルの外に隠れたdivを移動した後、問題は解決しました。