html - Firefox 用户界面行 "glitch"

Question

我在使用 Firefox 的网站上遇到了一个“小”问题。在 Google Chrome 和 Safari 上，它工作得很好。

它应该是什么(Chrome 和 Safari):

Firefox 上的问题:

.headline {
  line-height: 1.5em;
  position: relative;
}

.headline:after {
  content: ' ';
  position: absolute;
  display: block;
  width: 230px;
  margin: 5px 2%;
  border: 2px solid #64c800;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
}

<h2><span class="headline">Contact</span></h2>

预期结果是绿线应位于标题下方(在本例中为“联系人”下方)。

可重现的代码:重要的被遗忘的笔记；我也使用 Bootstrap 4。

<style>
#wrapper {
    position: relative;
    margin: 25px auto 5px auto;
    max-width: 820px;
    min-height: 600px;
    padding: 1px 0px 30px 0px;
    background-color: #ffffff;
    color: #603813;
    text-align: center;
}
.headline {
    line-height: 1.5em;
    position: relative;
}

.headline:after {
    content: ' ';
    position: absolute;
    display: block;
    width: 230px;
    margin: 5px 2%;
    border: 2px solid #64c800;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
}
</style>

<div class="container-fluid">
<div class="row-fluid">
  <div id="wrapper">
        <div class="row">
            <div class="col-md-12">
                <h2><span class="headline">Contact</span></h2>
            </div>
        </div>
</div>
</div>

Answer 1

我认为问题在于您没有为您的行定义垂直位置(top 或 bottom)，所以浏览器会做任何事情。

尝试添加

.headline:after {
  top: 100%;
}

JSFiddle:https://jsfiddle.net/0p7948Lx/2/