为什么在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不能在我的桌子上工作？

回答

相关问题