我在一个内联块div中有两个块元素，其中一个是垂直线，如图here.中所示
这里是参考代码
.corner:before {
display: block;
width: 1px;
min-height: 7vw;
background: black;
content: '';
margin-top: -10px;
margin-left: 50%;
}<div class="corner" style="display: inline-block;">
<h3 style="font-family: Italianno;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 3vw;
letter-spacing: 0.15em;
">
Sorority
</h3>
</div>但是，在刷新页面时，该行会自对准并看起来像this
仅在调整页面大小或调用alert时，该行才会重新对齐。我尝试在页面加载时调用windows.focus（），但仍然没有骰子。
这里是什么问题？
编辑：该错误不会出现在Google Chrome上，而只会出现在FireFox上
<!DOCTYPE html>
<html lang="en">
<head>
<title>
design
</title>
<style>
.corner{
font-family: Italianno;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 3vw;
letter-spacing: 0.15em;
position:relative;
}
.corner:before{
display:block;
width: 1px;
min-height: 7vh;
background: black;
content: '';
position:absolute;
bottom:-7vh;
left:50%;
}
</style>
</head>
<body>
</body>
</html>
<div style="display: inline-block; margin-top:7vh;" >
<h3 class='corner'>
Sorority
</h3>
</div>尝试使用相对和绝对位置。这将防止线条在不同的视口重新对齐。
我将在此处重点介绍一些要考虑的问题：考虑使用'em'和'px'进行字体大小和高度/宽度测量。另外，在代码的min-height: 7vw;中，它应该是min-height: 7vh;（视口高度）。使用vh和vw的问题在于，最终将在不同的视口拉伸元素。但是，如果将所有内容都更改为px或'em'，则会获得定义明确的分阶段内容。如果您想在使用'em或px'时解决响应式视图端口的问题，请使用'％'使包含元素的div容器使用'％';