Chrome和Firefox中可摺疊元素的不同行爲

我正在開發一個開源事件管理項目，並且遇到了跨瀏覽器問題。這裏是event site Chrome和Firefox中可摺疊元素的不同行爲

在Chrome

在房間頁面，如果我點擊任何會議，它正確地伸長而正確崩潰再次點擊。以下是截圖：

在點擊會話元素（在這種情況下， '開幕詞'）

在再次單擊崩潰

在Firefox

在點擊任何會話元素（它正常擴展）

但它不能正確摺疊。它創建一個空的空間。（只有頁面第一會話正確崩潰）

我試圖用開發人員控制檯窗口調試錯誤無濟於事。非常感謝任何幫助。謝謝！！

來源

2017-05-15 Abhishek Rastogi

我已經在Firefox中檢查這一點，出於某種原因，Firefox會行不皮卡的尺寸...

所以我申請

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

到行與下拉，這似乎工作！

來源

2017-05-15 17:56:14 joecia

非常感謝您的快速回答。但是，請您解釋一下，或者提出一個想法，說明爲什麼它沒有提前工作，爲什麼在添加所需屬性後開始工作。知道你是怎麼想出解決問題的附加屬性的，這將是一件好事。謝謝！！ –

我一直在尋找這個，我懷疑這個問題可能歸因於你有div作爲h4的子元素。我建議使用div來包裝這部分的標記，而不是使用h4。請參閱http://w3c.github.io/html/single-page.html#the-h1-h2-h3-h4-h5-and-h6-elements – joecia

感謝您的建議。我一整天都在捶胸頓足，找出這個錯誤的原因。我發現它與div元素的float屬性有關。父元素因其內部的浮動元素而崩潰，其高度變爲零。我查了一下互聯網，你可以使用你指定的屬性來防止父元素崩潰。我嘗試使用其他屬性，這些屬性也可以用來防止崩潰，並且所有這些屬性都起作用。但仍然爲什麼會發生？請考慮一下。謝謝 –

Chrome和Firefox中可摺疊元素的不同行爲

回答

相關問題