Firefoxが下端のパディング値を受け付けないのはなぜですか？

Question

ChromeとFirefoxの一貫性のない外観に問題があります。私の驚いたことに、reset.cssを使った後でも、私は同じ問題を抱えています。それはFirefoxが "％"で設定されているパディングを使用していないのと同じように、パディングをピクセル単位で設定すると動作します。

W3バリデーターがきれいに出ました。

私の問題：

右側は、Firefoxで、それはリセットを使用した後です。

これはdiv要素のスタイルです：Chromeの場合

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

、パディングは、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>

Answer 1

これは、青の背景と脂肪グレーの境界線があり、コンテナにoverflow: hidden;を使用することによって解決されることがある問題であるように思われます。 hobbiesクラス自体の問題ではなく、親コンテナの1つに問題があるようです。他のコメント作成者の一人が言ったように、もう少しコードを投稿してください。もっと助けてください。