CSS，Firefox和IE中不同的展开和折叠行为

Question

我有一个带有扩展菜单的面板，其他类似：

当我在IE 10和Firefox 55.0.3中展开面板时，看起来像这样：

但是在chrome中，效果很好

.tbl-main有两个部分。可扩展搜索面板和结果面板（tbl-容器）。 我使用flex布局来覆盖parent.Search面板在这里只有15px..tbl-main的其余部分必须是.tbl-container。 但是浏览器的行为很奇怪。 这是我的HTML和CSS代码

 .tbl-main { height: 100%; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-direction: normal; -moz-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .tbl-searchpanel { min-height: 15px; background: yellow; } .tbl-container { min-height: 50px; background-color: blue; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .tbl-searchpanel input { display: none; visibility: hidden; } .tbl-searchpanel label { display: block; padding: 0.5em; text-align: center; border-bottom: 1px solid #CCC; color: #666; background-color: lightcoral; min-height: 100%; } .tbl-searchpanel label:hover { color: #000; } .tbl-searchpanel label::before { font-family: Consolas, monaco, monospace; font-weight: bold; font-size: 15px; content: "+"; vertical-align: central; display: inline-block; width: 20px; height: 20px; margin-right: 3px; background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%); } #expand { width: 100%; height: 250px; overflow: hidden; transition: height 0.5s; /*background: url(http://placekitten.com/g/600/300);*/ /*color: #FFF;*/ background-color: red; display: none; } #toggle:checked~#expand { display: block; } #toggle:checked~label::before { content: "-"; } 

 <div class="tbl-main"> <div class="tbl-searchpanel"> <input id="toggle" type="checkbox" /> <label for="toggle"></label> <div id="expand"></div> </div> <div class="tbl-container"> </div> </div> 

Answer 1

取消min-height: 100%; 来自.tbl-searchpanel label规则

堆栈片段

 html, body { height: 100%; margin: 0; } .tbl-main { height: 100%; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-direction: normal; -moz-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .tbl-searchpanel { min-height: 15px; background: yellow; } .tbl-container { min-height: 50px; background-color: blue; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .tbl-searchpanel input { display: none; visibility: hidden; } .tbl-searchpanel label { display: block; padding: 0.5em; text-align: center; border-bottom: 1px solid #CCC; color: #666; background-color: lightcoral; /* min-height: 100%; removed */ } .tbl-searchpanel label:hover { color: #000; } .tbl-searchpanel label::before { font-family: Consolas, monaco, monospace; font-weight: bold; font-size: 15px; content: "+"; vertical-align: central; display: inline-block; width: 20px; height: 20px; margin-right: 3px; background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%); } #expand { width: 100%; height: 250px; overflow: hidden; transition: height 0.5s; /*background: url(http://placekitten.com/g/600/300);*/ /*color: #FFF;*/ background-color: red; display: none; } #toggle:checked~#expand { display: block; } #toggle:checked~label::before { content: "-"; } 

 <div class="tbl-main"> <div class="tbl-searchpanel"> <input id="toggle" type="checkbox" /> <label for="toggle"></label> <div id="expand"></div> </div> <div class="tbl-container"> </div> </div>