为什么 Firefox 不接受底部 % 填充值？ [复制]答案

【问题标题】：Why is Firefox not accepting bottom % padding values? [duplicate]为什么 Firefox 不接受底部 % 填充值？ [复制]
【发布时间】：2017-05-23 00:55:10
【问题描述】：

我遇到了 Chrome 和 Firefox 外观不一致的问题。令我惊讶的是，即使在使用 reset.css 之后，我仍然遇到同样的问题；就像 Firefox 没有使用“%”中设置的任何填充，如果我以像素为单位设置填充，那么它确实有效。

W3 验证器干净利落。

我的问题：

右边是火狐，使用reset之后。

这是div的样式：

.hobbies {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 5% 10% 15% 10%;
  background: #66B9BF;
  color: #373737;
}

在 Chrome 中，填充是拉伸 div 的原因，但在 Firefox 中不会发生这种情况。

.me-wrap {
    display: -webkit-box;
    display: flex; 
    flex-wrap: wrap;
    padding: 3%;
    background: #373737;
} 
.hobby-title {
    margin-bottom: 5%;
}
.hobbies {
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 5% 10% 15% 10%;
    background: #66B9BF;
}
.hobbies-icons{
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.icon {
    font-size: 45px;
    width: 80px;
    height: 80px;
    background-color: #373737;
    border-radius: 100%;
    line-height: 80px;
}
.icon-text {
    font-size: 16px;
    line-height: initial;
    margin-bottom: 2%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="me-wrap">   
    <div class="hobbies">
        <h1 class="hobby-title"> Hobbies/Interests </h1>
        <div class="hobbies-icons">
            <div class="icon"> <i class="fa fa-paw" aria-hidden="true"></i>
                <p class="icon-text"> Animal lover </p>
            </div>
            <div class="icon"> <i class="fa fa-code" aria-hidden="true"></i>
                <p class="icon-text"> Code enthusiast </p>
            </div>
            <div class="icon"> <i class="fa fa-bicycle" aria-hidden="true"></i>
                <p class="icon-text"> Exercise practicioner </p>
            </div>
            <div class="icon"> <i class="fa fa-gamepad" aria-hidden="true"></i>
                <p class="icon-text"> Videogame aficionado </p>
            </div>
            <div class="icon"> <i class="fa fa-hand-spock-o" aria-hidden="true"></i>
                <p class="icon-text"> Geek culture adherent </p>
            </div>
            <div class="icon"> <i class="fa fa-leaf" aria-hidden="true"></i>
                <p class="icon-text"> Outdoor nut </p>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

你能提供一个 jsfiddle 或类似的基本示例，显示问题吗？你可能在其他地方有冲突的风格。
恐怕代码太大，我想我想知道这是否是由 X 引起的已知问题。
我们需要看到这个minimal reproducible example。至少我们需要查看受影响元素及其父元素的 HTML，以及影响布局的元素及其父元素的任何 CSS。
添加了一些代码。
一些事情：1）您可能需要重新检查您的 W3 验证；您不能将 div 放在 p 标签中。 2) 就左右填充而言，FF 和 Chrome 的行为是相同的，所以我在你关于底部填充的问题中澄清了，这是唯一的区别。 3）这是一个很好的完整且可验证的演示，但它不是最小的。尝试将代码简化为重现具有填充问题的图标行为所需的部分。

标签： css google-chrome firefox cross-browser flexbox

【解决方案1】：

这似乎是一个可以通过在具有蓝色背景和粗灰色边框的容器上使用overflow: hidden; 来解决的问题。这不是hobbies 类本身的问题，而是其中一个父容器的问题。正如其他评论者所说，请发布更多代码，我们可能会提供更多帮助。

【讨论】：