爲什麼在Safari和Firefox中min-height不能在我的桌子上工作？

該網站在Chrome和Edge上正常工作，但在Firefox和Safari上被壓扁。爲什麼在Safari和Firefox中min-height不能在我的桌子上工作？

這裏是一個工作JSFiddle

這裏是表示頂部之間比較的圖像 - Safari和底 - 鍍鉻。它應該看起來像最底層的那個。。

.spell span { 
 
    position: relative; 
 
    top: 25%; 
 
} 
 
.note { 
 
    clear: both; 
 
} 
 
.spell { 
 
    text-align: center; 
 
    max-width: 100%; 
 
    height: 35px; 
 
    background-color: #E7E7E7; 
 
} 
 
.BUFF { 
 
    background-color: #80DE57; 
 
} 
 
.NERF { 
 
    background-color: #DE5B54; 
 
} 
 
.CHANGE { 
 
    background-color: #D2A557; 
 
} 
 
.NEW { 
 
    background-color: #50B9EB; 
 
} 
 
.BUGFIX { 
 
    background-color: rgb(141, 141, 141); 
 
} 
 
.change_icon { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    cursor: default; 
 
    color: white; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    min-width: 70px; 
 
    height: 100%; 
 
    display: table-cell; 
 
}

<div class="note"> 
 
    <div class="spell"> <span class="spelliconwithtitle">text</span> 
 

 
    </div> 
 
    <hr style="margin: 0; padding: 0;"> 
 
    <div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative; display: table; "> 
 
     <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; ">test</p> 
 
     <div class="change_icon BUFF">text</div> 
 
    </div> 
 
    <hr style="margin: 0; padding: 0;"> 
 
    <div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative; display: table; "> 
 
     <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; ">test</p> 
 
     <div class="change_icon NERF">nerf</div> 
 
    </div> 
 
</div>

來源

2015-09-14 Higeath

可能重複http://stackoverflow.com/questions/5277161/why-is-min-height-not-working –

@AmitHorakeri我已經試過了沒有幫助增加高度：100％; – Higeath

你需要顯示爲表格和表格單元的任何原因？ – Aaron

min-height不表上工作。

您將有height

.spell span { 
 
    position: relative; 
 
    top: 25%; 
 
} 
 
.note { 
 
    clear: both; 
 
} 
 
.spell { 
 
    text-align: center; 
 
    max-width: 100%; 
 
    height: 35px; 
 
    background-color: #E7E7E7; 
 
} 
 
.BUFF { 
 
    background-color: #80DE57; 
 
} 
 
.NERF { 
 
    background-color: #DE5B54; 
 
} 
 
.CHANGE { 
 
    background-color: #D2A557; 
 
} 
 
.NEW { 
 
    background-color: #50B9EB; 
 
} 
 
.BUGFIX { 
 
    background-color: rgb(141, 141, 141); 
 
} 
 
.change_icon { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    cursor: default; 
 
    color: white; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    min-width: 70px; 
 
    height: 100%; 
 
    display: table-cell; 
 
}

<div class="note"> 
 
    <div class="spell"> <span class="spelliconwithtitle">text</span> 
 

 
    </div> 
 
    <hr style="margin: 0; padding: 0;"> 
 
    <div style="overflow: auto;width: 100%; height: 41px; max-height: 100%; position: relative; display: table; "> 
 
     <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell;height: 41px; ">test</p> 
 
     <div class="change_icon BUFF">text</div> 
 
    </div> 
 
    <hr style="margin: 0; padding: 0;"> 
 
    <div style="overflow: auto;width: 100%; height: 41px; max-height: 100%; position: relative; display: table; "> 
 
     <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; height: 41px;">test</p> 
 
     <div class="change_icon NERF">nerf</div> 
 
    </div> 
 
</div>

來源

2015-09-14 15:25:11 Aaron

好吧，現在它不能在鉻上正常工作，我應該保持最小高度：41px;和高度：41px;這似乎是工作 – Higeath

我更新了我的答案，你需要將高度添加到chrome的'table-cell'元素！ – Aaron

來代替它的多樣性：

相反的height您可以在元素中使用line-height。

.spell span { 
 
    position: relative; 
 
    top: 25%; 
 
} 
 
.note { 
 
    clear: both; 
 
} 
 
.spell { 
 
    text-align: center; 
 
    max-width: 100%; 
 
    height: 35px; 
 
    background-color: #E7E7E7; 
 
} 
 
.BUFF { 
 
    background-color: #80DE57; 
 
} 
 
.NERF { 
 
    background-color: #DE5B54; 
 
} 
 
.CHANGE { 
 
    background-color: #D2A557; 
 
} 
 
.NEW { 
 
    background-color: #50B9EB; 
 
} 
 
.BUGFIX { 
 
    background-color: rgb(141, 141, 141); 
 
} 
 
.change_icon { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    cursor: default; 
 
    color: white; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    min-width: 70px; 
 
    height: 100%; 
 
    display: table-cell; 
 
}

<div class="note"> 
 
    <div class="spell"> <span class="spelliconwithtitle">text</span> 
 

 
    </div> 
 
    <hr style="margin: 0; padding: 0;"> 
 
    <div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative; display: table; "> 
 
     <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; line-height: 41px; ">test</p> 
 
     <div class="change_icon BUFF">text</div> 
 
    </div> 
 
    <hr style="margin: 0; padding: 0;"> 
 
    <div style="overflow: auto;width: 100%; min-height: 41px; max-height: 100%; position: relative; display: table; "> 
 
     <p style="padding: 0px 5px 0px 5px;width: 100%;margin: 0 1% 0 1%;display: table-cell; line-height: 41px; ">test</p> 
 
     <div class="change_icon NERF">nerf</div> 
 
    </div> 
 
</div>

來源

2015-09-14 15:26:50

爲什麼在Safari和Firefox中min-height不能在我的桌子上工作？

回答

相關問題