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

我在Chrome和Firefox之间看起来不一致的问题。令我惊讶的是，即使在使用reset.css之后，我仍然遇到同样的问题。这就像Firefox没有使用任何在“％”中设置的填充，如果我设置像素填充，那么它的工作。为什么Firefox不接受底部％填充值？

W3验证器出来干净。

我的问题：

右侧是Firefox和使用复位后，这是。

这是div的风格：

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

在Chrome中，填充就是绵延的股利，但不是在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>

来源

2017-01-08 Sergi

你能提供一个基本的例子在jsfiddle或类似的，显示的问题？其他地方可能会有相互冲突的风格。 – seemly

恐怕代码太大了，我想我是想知道这是否是由X引起的已知问题。 – Sergi

我们需要看到这个[mcve]。至少我们需要查看受影响元素及其父代的HTML，以及影响布局的元素及其父代的任何CSS。 – TylerH

这似乎是可以通过使用具有蓝色背景和脂肪灰色边框的容器上的overflow: hidden;要解决的问题。它不是hobbies类本身的问题，而是其中一个父容器出现问题。正如其他评论者所说，请张贴更多的代码，我们可以帮助更多。

来源

2017-01-08 19:14:24

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

回答

相关问题