时间戳

首页 > 解决方案 > Firefox和Chrome中CSS行高中的箭头不同

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

问题描述

我有一个用::before和::after元素制作的箭头。
问题是它在一个元素中使用，其中字体大小是用 line-height 计算的，像这样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 中打开此链接并查看差异。
关联

问题是我该如何解决？我想我可以制作line-height: 0，但可以在不触及文本样式的情况下修复它吗？

标签： htmlcss

解决方案

这似乎是由于在计算元素时浏览器之间的舍入行为不同造成top的。.arrow::after

要么更改from to height，要么完全删除高度并更改from to似乎使事情更加一致，并且它们在我的浏览器中看起来不错。.arrow5px6pxtop.arrow::after2px-1px

在将and的leftandright属性更改为to之后，对我来说，事情看起来也更干净了。.arrow--left::before.arrow--right::before10px8px

.container {
  line-height: 1.2em;
  margin: 2em;
}
.arrow {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 35px;
}
.arrow::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  border: 2px solid orange;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
}
.arrow::after {
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  width: 20px;
  top: -1px;
  right: 8px;
  background-color: orange;
}
.arrow--left::before {
  left: 8px;
  border-right: 0;
  border-top: 0;
}
.arrow--right::before {
  right: 10px;
  border-left: 1px;
  border-bottom: 1px;
}
.arrow:hover:before {
  border-color: black;
}
.arrow:hover:after {
  background: #000;
}
<div class="container">
  <div class="arrow arrow--left"></div>
  <div class="arrow arrow--right"></div>
</div>

推荐阅读