ChromeとFirefoxの折りたたみ可能な要素の動作が異なります

私はオープンソースのイベント管理プロジェクトに取り組んでおり、クロスブラウザの問題を抱えていました。私はすべてのセッションをクリックするとここでは、正常に展開してから、再度クリックで正常に崩壊し、部屋のページでChromeとFirefoxの折りたたみ可能な要素の動作が異なります

クロームでevent site

です。ここでのスクリーンショットは以下のとおりです。セッションの要素をクリックすると

（この場合は 'オープニングスピーチ'）

クリックするとFirefoxの

で

を折りたたむにはもう一度クリックで任意のセッション要素（通常展開）

しかしは正しく崩壊しません。空のスペースが作成されます。（ページの最初のセッションだけが正しく折りたたまれます）

デベロッパーコンソールウィンドウを使用してエラーをデバッグしようとしました。本当に助けに感謝します。ありがとう!!

出典

2017-05-15 Abhishek Rastogi

私はFirefoxでこれを検査している、といくつかの理由で、Firefoxはピックアップ行の大きさをしません...

は、だから私は、ドロップダウンで行へ

.room-filter{ 
    display: inline-block; 
    width: 100%; 
}

を適用しました、それは動作するようでした！

出典

2017-05-15 17:56:14 joecia

素早い回答をいただきありがとうございます。しかし、それが以前にはうまくいかなかった理由と、それが必要なプロパティを追加した後に機能し始めた理由について説明したり、アイデアを与えたりできますか？どのようにして問題を修正した追加のプロパティーが出てきたのかを知るのはすばらしいことでしょう。ありがとう!! –

私はこれを調べていますが、問題はh4の子要素としてdivsがあるという事実になる可能性があると思われます。 h4を使用する代わりに、このセクションのマークアップを囲むためにdivを使用することをお勧めします。 http://w3c.github.io/html/single-page.html#the-h1-h2-h3-h4-h5-and-h6-elements – joecia

ご提案いただきありがとうございます。私はこのバグの理由を見つけるために一日中私の頭を叩いています。私が見つけたのは、div要素のfloatプロパティと関係があることです。親要素は、内部の浮動要素のために折りたたまれ、その高さはゼロになります。私はインターネット上を調べ、指定したプロパティを使用して親要素が崩壊するのを防ぐことができます。私は折り畳みを防止するために使用することができる他のプロパティを使用してみましたが、それらのすべてが機能するように見えました。しかし、それでもなぜそれは起こりますか？それを調べてください。ありがとうございます –

ChromeとFirefoxの折りたたみ可能な要素の動作が異なります

答えて

関連する問題