Почему Firefox не принимает значения нижнего% заполнения?

У меня проблемы с непоследовательным взглядом между Chrome и Firefox. К моему удивлению, даже после использования reset.css у меня все те же проблемы; это похоже на то, что Firefox не использует ни одного дополнения, установленного в «%», если я устанавливаю padding в пикселях, тогда он работает.Почему Firefox не принимает значения нижнего% заполнения?

W3 валидатор вышел чистый.

Моя проблема:

Правая сторона Firefox, и это после того, как с помощью сброса.

Это стиль 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>

источник

2017-01-08 Sergi

Вы можете представить базовый пример в jsfiddle или аналогичном, отображая проблему? У вас могут быть конфликтующие стили в другом месте. – seemly

Я боюсь, что код слишком велик, я думаю, я хотел знать, была ли это известная проблема, вызванная X. – Sergi

Нам нужно увидеть [mcve] этого. По крайней мере, нам нужно увидеть HTML-код затронутого элемента и его родителя, а также любой CSS для элемента и его родителя, который влияет на макет. – TylerH

Это, как представляется, проблема, которая может быть решена с помощью overflow: hidden; на контейнере, который имеет синий фон и толстые серые границы. Вместо того, чтобы быть проблемой с самим классом hobbies, это, по-видимому, проблема с одним из родительских контейнеров. Как сказал один из других комментаторов, пожалуйста, напишите немного больше кода, и мы можем, возможно, помочь больше.

источник

2017-01-08 19:14:24

Почему Firefox не принимает значения нижнего% заполнения?

ответ

Смежные вопросы