У меня проблемы с непоследовательным взглядом между 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>
Вы можете представить базовый пример в jsfiddle или аналогичном, отображая проблему? У вас могут быть конфликтующие стили в другом месте. – seemly
Я боюсь, что код слишком велик, я думаю, я хотел знать, была ли это известная проблема, вызванная X. – Sergi
Нам нужно увидеть [mcve] этого. По крайней мере, нам нужно увидеть HTML-код затронутого элемента и его родителя, а также любой CSS для элемента и его родителя, который влияет на макет. – TylerH