0

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

4

2 回答 2

1

使用视口高度 vh 时，Microsoft Edge 中似乎存在错误。尝试以像素为单位设置行高，它应该可以工作。如果您想将项目居中，那么我建议使用 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;
    }
于 2019-11-10T00:09:45.283 回答
0

您可以手动等待页面完全加载，然后再显示，减少它呈现错误的机会。

window.onload = function();

于 2019-11-09T23:43:00.793 回答