html - CSS Top 位置需要手动刷新

Question

我正在做一个网上商店，遇到了一种奇怪的错误。

我正在尝试制作购物车“徽章”以轻松查看购物车中的商品数量。这是一个响应式网站，徽章位于 a 标签上，其中包含两个 display: block 标签。在桌面端，徽章 CSS 看起来像这样:

.count::after{
  content: "2";
  display: inline-block;
  background: #FF0000;
  border-radius: 20%;
  padding: 0 0.5em;
  transform: scale(0.7);
  color: #FFF;
  float: right;
  position: absolute;
  top: 5px;
  right: 1.5em;
}

.count::after:empty{
  display: none;
  padding: 0
}

效果很好，徽章显示在右上角。但是在移动设备上，a 标签包装器变为全 Angular ，使用上述 css 会导致徽章飞到屏幕的一侧。

于是我写了下面的移动端代码:

@media max-width: 990px{
    ...
    .count::after{
        position: relative;
        top: -90%;
        right: 0;
    }

}

但是。 top: -90% 没有正确注册。如果我进入开发工具并将其关闭和打开，它会完美运行。但如果我刷新，它会立即回到图标底部。

违规部分的 JS-fiddle:here

Answer 1

我同意 Shahil 的观点，您应该将 position:relative 设置为具有 .count 类的元素，并设置 position:absolute 和 top:-5px (比方说)到 .count::after

像这样:

.d-block{
  display: block;
}
.d-inline_block{
  display: inline-block;
}
.t-center{
  text-align: center;
}
.menu{
  width:100%;
  text-align: center;
}
.count {
  position:relative;
}
.count::after{
  content: "2";
  display: inline-block;
  background: #FF0000;
  border-radius: 20%;
  padding: 0 0.5em;
  transform: scale(0.7);
  color: #FFF;
  float: right;
  position: absolute;
  top: -5px;
  right: 0;
}

<div class="col-xs-12 col-md-4 my-auto menu t-right">
                <a href="/account/login" class="d-inline_block headerLink">
                  <i class="fa fa-lg fa-user d-block t-center py-8">icon</i>
                  <span class="d-block t-center">Min konto</span>
                </a>
                <a href="/pages/kundeservice" class="d-inline_block headerLink"><i class="fa fa-lg fa-question d-block t-center py-8">icon</i><span class="d-block t-center">Kundeservice</span></a>
                <a href="/cart" class="d-inline_block headerLink count"><i class="fa fa-lg fa-shopping-cart d-block t-center py-8">icon</i><span class="kurv d-block t-center">Min kurv</span></a>
              </div>

这应该在不使用@media 查询的情况下在桌面和移动设备上工作