Кроссбраузерность, разное отображение блока при одинаковом коде

Question

Имеются 2 браузеры и соответственно разное отображение блока при верстке в них:

Отображение блока 1-й браузер Mozilla Firefox 68.3.0esr (64-біт) :

Отображение блока 2-й Chromium: 80.0.3987.163 (Official Build) (64-bit) :

Код данного блока :

.popular__wrapper {
  max-width: 978px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}

.popular__button {
  position: absolute;
  /* left: 204px; */
  left: 20.86%;
  /* top: 154px; */
  top: 11.51%;
}

.popular__button-text {
  margin-bottom: 10px;
}

.popular__header {
  display: flex;
  justify-content: end;
  width: 100%;
  /* margin-bottom: 100px; */
  margin-bottom: 10.48%;
}

.popular__header-container {
  width: 48.21%;
}

.popular__header-title {
  /* margin-bottom: 50px; */
  margin-bottom: 12%;
  /* width: 100%; */
}

.popular__header-title-text {
  word-wrap: break-word;
}

.popular__header-text {
  width: 100%;
}

<div class="popular__wrapper">
  <div class="popular__button button">
    <div class="popular__button-text button__text">
      <a href="#" class="popular__button-text button__text">full shop</a>
    </div>
    <div class="popular__button-img button__img">
      <a href="#" class="popular__button-text button__text"><img src="img/button/01.svg" alt="arrow"></a>
    </div>
  </div>
  <header class="popular__header header">
    <div class="popular__header-container">
      <div class="popular__header-title header__title">
        <h1 class="popular__header-title-text header__title-text"><span class="header__title-color">popular</span><br>watch</h1>
      </div>
      <div class="popular__header-text  header__text">
        Breguet's philosophy can be defined as a tireless process of creative search and implementation of innovations, the desire to always be one step ahead of its era and at the same time strictly comply with the technical and aesthetic standards developed
        by A.L. Breguet and laid the foundations of modern watchmaking.
      </div>
    </div>
  </header>
</div>

Задача: отобразить блок во всех браузерах так как он отображается в 1-ом браузере.

Answer 1

В итоге все решилось следующим образом:

    .popular__wrapper {
    max-width: 978px;
    margin: 0 auto;
    padding: 0 15px;
    /* position: relative; */
}
.popular__header {
    display: inline-block;
    position: relative;
    /* min-height: 200px; */
    /* justify-content: end; */
    width: 100%;
    /* margin-bottom: 100px; */
    margin-bottom: 10.48%;
}
.popular__button {
    position: absolute;
    /* left: 204px; */
    /* left: 20.86%; */
    /* top: 154px; */
    /* top: 11.51%; */
    left: 204px;
    top: 150px
}
.popular__button-text-block {
    margin-bottom: 12px;
}
.popular__header-container {
    float: right;
    width: 48.21%;        
}
.popular__header-title {
    /* margin-bottom: 50px; */
    margin-bottom: 12%;
    /* width: 100%; */
}
.popular__header-title-text {
    word-wrap: break-word;
}
.popular__header-text {
    width: 100%;
}

Старый добрый float vs flex / Барон Мюнхаузен рулит ...

БЛОГ НА HUSL

Кроссбраузерность, разное отображение блока при одинаковом коде

Ответы (1 шт):