Question

我有一个由::before和::after元素组成的箭头。
问题是，它用在像这样的元素中，在其中用行高计算字体大小，像font: 17px/1.2em zantroke;

发生的事情是，在Chrome中看起来不错，但是在Firefox中，该行稍低，箭头看上去很糟糕。

试一下样式，我发现问题是行高，这在Chrome和Firefox中有所不同。（可能与字体家族结合使用）

我试图举一个尽可能接近真实事物的例子。

箭头HTML

<div class="container">
  <div class="arrow arrow--left"></div>
  <div class="arrow arrow--right"></div>
</div>

样式

.container {
  line-height: 1.2em;
  margin: 2em;
}
.arrow {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 35px;
    height: 5px;

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        border: 2px solid orange;
        width: 8px;
        height: 8px;
        transform: translateY(-50%) rotate(45deg);
    }

    &::after {
      content: '';
      display: block;
      position: absolute;
      height: 2px;
      width: 20px;
      top: 2px;
      right: 8px;
      background-color: orange;
    }

    &--left::before {
        left: 10px;
        border-right: 0;
        border-top: 0;
    }
    &--right::before {
        right: 10px;
        border-left: 1px;
        border-bottom: 1px;
    }
}

.arrow:hover:before {
  border-color: black;
}
.arrow:hover:after {
  background: #000;
}

您可以在Chrome，Firefox中打开此链接，然后查看区别。
Link

问题是我该如何解决？我想我可以制作line-height: 0，但可以不修改文本样式就解决它吗？

Answer 1

这似乎是由于浏览器之间在计算top元素的.arrow::after中使用不同的舍入行为引起的。

将height的{{1}}从.arrow更改为5px，或者完全删除高度并更改{{1}的6px }从top到.arrow::after似乎使事情变得更加一致，并且在我的浏览器中看起来还可以。

在将2px和-1px的{{1}}和left属性从right更改为.arrow--left::before之后，事情看起来对我来说还比较干净

.arrow--right::before

10px

Firefox和Chrome中CSS行高的箭头不同

1 个答案: