Edge浏览器呈现页面错误，但在单击刷新后正确显示
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Edge浏览器呈现页面错误，但在单击刷新后正确显示相关的知识，希望对你有一定的参考价值。
在加载页面后，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或刷新，将按预期方式渲染。
答案
使用视口高度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;
}
另一答案
您可以手动等待页面完全加载，然后显示，以减少呈现错误的机会。
window.onload = function();
以上是关于Edge浏览器呈现页面错误，但在单击刷新后正确显示的主要内容，如果未能解决你的问题，请参考以下文章
带有 JQuery 的 Rails 5：带有显示和隐藏 JQuery 切换的表单最初会显示，但在我刷新页面后会隐藏起来
出现无法显示此页。确保Web地址正常。使用搜索引擎查找页面。请过几分钟后刷新页面