HTML 块元素在刷新时移动（更改边距）答案

【问题标题】：HTML block element moves (changes margins) upon refreshHTML 块元素在刷新时移动（更改边距）
【发布时间】：2019-10-20 19:26:17
【问题描述】：

我在一个 inline-block 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 上

【问题讨论】：

对我来说一切似乎都很好。在您的内容属性之后，您只是有一个错误。有一个不应该存在的等号。
无法重现您描述的问题，这让我相信问题是由其他 css 或其他 html 元素而不是上面的代码引起的 - 但是 content: ''; = 不正确！删除=
你确定吗？因为在这个页面上运行一个代码 sn -p 会显示这个问题。编辑：该错误不会出现在 google chrome 上，而是出现在 firefox 上。

标签： html css margin page-refresh

【解决方案1】：

<!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 容器响应式；

【讨论】：

注意！所以我设置了 div 容器或元素本身的 font-size 属性？