gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 05:45:10 24 4
gpt4 key购买 nike

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

最佳答案

Microsoft Edge 在使用视口(viewport)高度 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;
}

关于html - Edge浏览器呈现页面错误,但点击刷新后正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58783620/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com