Edge浏览器呈现页面错误，但点击刷新后正确

Question

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 或刷新，它会按预期呈现。

Answer 1

您可以手动等到页面完全加载后再显示，减少渲染错误的几率。

window.onload = function();

Answer 2

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;
    }

Edge浏览器呈现页面错误，但点击刷新后正确

Edge browser renders page wrong, but correct after clicking refresh

html

css

microsoft-edge

line-height