Браузер Edge отображает страницу неправильно, но корректно после нажатия кнопки «Обновить» - PullRequest
Новая
       17

Браузер Edge отображает страницу неправильно, но корректно после нажатия кнопки «Обновить»

0 голосов
/ 10 ноября 2019

Edge отображает страницу неправильно после загрузки, но после нажатия кнопки «Обновить» она корректно отображает ее.

Работает, как и ожидалось, в Chrome и Firefox 

<html>

<head>
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      overflow: hidden;
    }
    
    .day {
      position: relative;
      float: left;
      width: 12%;
      background-color: white;
    }
    
    .header_class {
      position: relative;
      height: 5%;
      background-color: blue;
      color: white;
      font-size: 12px;
      text-transform: uppercase;
      text-align: center;
      line-height: 5vh;
    }
    
    .row_class {
      position: relative;
      height: 5%;
      color: black;
      font-size: 12px;
      text-align: center;
      line-height: 5vh;
    }
  </style>
</head>

<body>

  <div class="day">
    <div class="header_class">header</div>
    <div class="row_class">row1</div>
    <div class="row_class">row2</div>
    <div class="row_class">row3</div>
    <div class="row_class">row4</div>
  </div>

</body>

</html>

Текст должен быть центрирован в поле заголовка и ниже, но он находится над окном при загрузке страницы. Если я нажимаю F5 или обновляю, он рендерится, как и ожидалось.

Ответы [ 2 ]

1 голос
/ 10 ноября 2019

Кажется, в Microsoft Edge есть ошибка при использовании высоты области просмотра vh. Попробуйте установить высоту строки в пикселях, и она должна работать. Если вы хотите центрировать элементы, я предлагаю использовать flexbox, который в наши дни широко поддерживается в большинстве браузеров: 

body {
      font-family: 'Open Sans', sans-serif;
      overflow: hidden;
    }

    .day {
      position: relative;
      width: 12%;
      background-color: white;
      display: flex;
      justify-content: center;
      align-content: center;
      min-height:0;
      flex-direction: column;
    }

    .header_class {
      position: relative;
      height: 5%;
      background-color: blue;
      color: white;
      font-size: 12px;
      text-transform: uppercase;
      text-align: center;
      line-height: 25px;

    }

    .row_class {
      position: relative;
      height: 5%;
      color: black;
      font-size: 12px;
      text-align: center;

      line-height: 25px;
    }
0 голосов
/ 10 ноября 2019

Вы можете вручную дождаться полной загрузки страницы, а затем отобразить ее, уменьшая вероятность неправильного рендеринга.

window.onload = function();

...