Question

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

W3验证器干净利落。

我的问题：

右侧是Firefox，使用重置后即可。

这是div的风格：

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

在Chrome中，填充是扩展div的内容，但在Firefox中没有发生。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

为什么Firefox不接受底部％填充值？

1 个答案: