Warum akzeptiert Firefox keine unteren Füllwerte?

Question

Ich habe Probleme mit inkonsistenten Aussehen zwischen Chrome und Firefox. Zu meiner Überraschung habe ich auch nach der Verwendung von reset.css immer noch die gleichen Probleme; Es ist so, als würde Firefox keinen Padding verwenden, der in "%" eingestellt ist, wenn ich den Abstand in Pixel festlege, funktioniert es.

W3 Validator kam sauber heraus.

Mein Problem:

der rechte Seite ist Firefox, und das ist nach dem Zurücksetzen mit.

Dies ist der Stil des div:

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

In Chrome, die Polsterung ist das, was die div erstreckt, aber das ist nicht passiert in 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

Dies scheint ein Problem zu sein, die unter Verwendung eines overflow: hidden; auf dem Container, der den blauen Hintergrund und das Fett grauen Rand hat gelöst werden könnte. Anstatt ein Problem mit der Klasse hobbies selbst zu sein, scheint es ein Problem mit einem der übergeordneten Container zu sein. Wie einer der anderen Kommentatoren sagte, poste bitte ein bisschen mehr Code und wir können wahrscheinlich mehr aushelfen.