Кроссбраузерность. Отступы для Mozilla Firefox

274
12 июня 2017, 20:26

Приветствую. Помогите пожалуйста. В браузере Mozilla Firefox некорректно отображаются отступы. Chrome, Opera, Yandex нормально отображают, а тут не очень правильно.

Вендорные префиксы пробовал, не помогло. Пробовал найти ошибку в инспекторе элементов, но не помогло тоже.

Текст не важен, по этому немного его изменил. Проблема в том, что с Mozilla нижняя строка плывет:

.block2, 
.block3 { 
  align-items: center; 
  display: flex; 
  flex-direction: row; 
  font-weight: 300; 
  height: 100vh; 
  justify-content: center; 
  line-height: 1.7; 
} 
 
.block2-all-wrap { 
  align-items: flex-start; 
  justify-content: center; 
  display: flex; 
  width: 100%; 
} 
 
.block2-col-left, 
.block2-col-right { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  padding: 2.5%; 
  padding-bottom: 2%; 
  padding-top: 2%; 
  width: 50%; 
} 
 
.block2-left-wrap, 
.block2-right-wrap { 
  align-items: center; 
  display: flex; 
  border: 4px solid transparent; 
  border-radius: 16px; 
  background: #fff; 
  background-clip: padding-box; 
  flex-direction: column; 
  justify-content: center; 
  position: relative; 
  padding-left: -2.5%; 
  padding-right: -2.5%; 
  padding-bottom: 0; 
} 
 
.block2-left-wrap::after, 
.block2-right-wrap::after { 
  background: linear-gradient(to top right, #71069E, #3B52B8, #00A2D4); 
  border-radius: 16px; 
  bottom: -4px; 
  content: ''; 
  left: -4px; 
  position: absolute; 
  right: -4px; 
  top: -4px; 
  z-index: -1; 
} 
 
.block2-left-wrap:hover::after, 
.block2-right-wrap:hover::after { 
  //background: linear-gradient(135deg, red 20%, blue 70%); 
} 
 
.block2-left-wrap { 
  margin-right: -2.5%; 
} 
 
.block2-right-wrap { 
  margin-left: -2.5%; 
} 
 
.block2-col-left-ico, 
.block2-col-right-ico, 
.block3-col-left-ico, 
.block3-col-center-ico, 
.block3-col-right-ico { 
  font-size: 600%; 
  padding-top: 5%; 
  text-align: center; 
} 
 
.block2-col-left-ico-text, 
.block2-col-right-ico-text { 
  display: flex; 
  font-size: 200%; 
  justify-content: center; 
} 
 
.block2-col-left-text, 
.block2-col-right-text { 
  color: rgba(0, 0, 0, 0.8); 
  padding: 5%; 
}
<html> 
 
<head> 
  <link href="https://fonts.googleapis.com/css?family=Rubik:300,500" rel="stylesheet"> 
  <script src="https://use.fontawesome.com/98212653bc.js"></script> 
</head> 
 
<body> 
 
 
  <div class="block2"> 
    <div class="block2-all-wrap"> 
      <div class="block2-col-left wow slideInLeft animated" data-wow-offset="200"> 
        <div class="block2-left-wrap"> 
          <div class="block2-col-left-ico"> 
            <i class="fa fa-history" aria-hidden="true"></i> 
          </div> 
          <div class="block2-col-left-ico-text"> 
            Історія 
          </div> 
          <div class="block2-col-left-text"> 
            13букв1234567 college як будівельний технікум створений відповідно до постанови Ради Міністрів УРСР №<span class="bold">679</span> від <span class="bold">20.06.1967</span> на базі сільськогосподарського технікуму, який готував фахівців для сільського 
            господарства з <span class="bold">1927</span> року. <br><br> Згідно з наказом Державного агропромислового комітету УРСР від <span class="bold">19.12.1990</span> №<span class="bold">249</span> 13букв1234567 будівельний college реорганізований 
            у 13букв1234567 будівельно-економічний college. <br><br> Відповідно до наказу Міністерства аграрної політики України від <span class="bold">11.11.2005</span> №<span class="bold">626</span> college реорганізовано у 13букв1234567 будівельно-економічний 
            коледж teststsr державного аграрного університету. 
          </div> 
        </div> 
      </div> 
      <div class="block2-col-right wow slideInRight animated" data-wow-offset="200"> 
        <div class="block2-right-wrap"> 
          <div class="block2-col-right-ico"> 
            <i class="fa fa-graduation-cap" aria-hidden="true"></i> 
          </div> 
          <div class="block2-col-right-ico-text"> 
            Профіль 
          </div> 
          <div class="block2-col-right-text"> 
            До <span class="bold">1981</span> року в будівельному технікумі велась підготовка фахівців лише будівельного напрямку. З <span class="bold">1981</span> року в 13букв1234567 розпочалась підготовка фахівців економічного спрямування – бухгалтерів 
            та плановиків для системи Мінсільбуду України, з <span class="bold">1998</span> року – програмістів, з <span class="bold">2003</span> року – фінансистів, а з <span class="bold">2012</span> року - менеджерів. <br> У <span class="bold">1991</span>            році одним із перших на Україні технікум пройшов відповідну перевірку інспекції Міносвіти України і отримав статус закладу II рівня акредитації – коледж, який потім підтвердився ліцензуванням та акредитацією відповідних спеціальностей. В даний 
            час підготовка фахівців в коледжі здійснюється за I освітньо-кваліфікаційним рівнем згідно ліцензії Міністерства освіти і науки, молоді та спорту України серія АЕ №<span class="bold">636471</span> видана <span class="bold">10.06.2015</span>            року з шести спеціальностей. 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
</body> 
 
</html>

Если в block2-col-left-text padding сделать 0, то текст вместится в блок, но выглядеть потом будет ужасно.

Answer 1

Решение немного корявое, но зато быстрое)

Добавьте в css:

@-moz-document url-prefix(){
    .block2-col-left-text,
    .block2-col-right-text{
        margin-bottom: 40px;
    }
}

И регулируйте отступ как угодно.

READ ALSO
Не функционирует компонент Bootstrap

Не функционирует компонент Bootstrap

Только изучаю библиотеку: просто взял код компонента Dropdown menu и хотел поэкспериментировать

237
Изменить внешний вид textarea в Bootstrap

Изменить внешний вид textarea в Bootstrap

Подскажите, как менять textarea для того, чтоб он имел следующий вид как на картинке

200
Вопросы по верстке email писем

Вопросы по верстке email писем

В качестве примера использовано письмо из рассылки HTML Academy

311
Регулярные выражения и LINQ C#

Регулярные выражения и LINQ C#

Привет всем, не могу сделать разбиение строки на подстроки с помощью регулярных выражений, как это требуетсяНужно разбить строку на подстроки...

774