html - Firefox UI 行“故障”

Question

我的 Firefox 网站上有一个“小”问题。在谷歌浏览器和 Safari 上它工作得很好。

它应该是什么（Chrome 和 Safari）：

火狐上的问题：

.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>

标签： htmlcss

Answer 1

我认为问题在于你没有为你的行定义一个垂直位置（top或bottom），所以浏览器只是做了任何事情。

尝试添加

.headline:after {
  top: 100%;
}

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