根据浏览器，标签在div中具有不同的内部填充

Question

我有一个带有图标和标签的容器。我使用flexbox将图标和标签对齐到容器的底部。

我注意到，根据浏览器（例如Chrome和FF），从容器底部到标签中文本的距离大约相差1px。

我使用了线条高度和图标+标签的不同布局，但我无法摆脱这个1px的差异。 Icon在该布局中没有任何作用，但我添加了它，因为因为我关心对齐这个像素的图标的存在。

https://jsfiddle.net/eh7jrp6s/6/

<div class="container ng-scope">
  <span class="icon" style="background-image: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBkPSJNMTYgMTBINFY3YzAtLjYtLjQtMS0xLTFzLTEgLjQtMSAxdjhjMCAuNi40IDEgMSAxczEtLjQgMS0xdi0zaDEydjNjMCAuNi40IDEgMSAxczEtLjQgMS0xVjdjMC0uNi0uNC0xLTEtMXMtMSAuNC0xIDF2M3oiIGZpbGw9IiMwMGI2ZmYiLz48L3N2Zz4=&quot;);">
  </span>
  <span class="label ng-binding">_________this line is on different level depending on a browser_______</span>
</div>

.container {
    display: flex;
    align-items: flex-end;
    color: $blue;
    cursor: default;
    text-decoration: none;
    border: 1px solid red;
    line-height:18px
  }
    .icon {
      background-size: 2rem 2rem;
      height: 2rem;
      width: 2rem;
      border: 1px solid blue;
      line-height:18px
    }

    .label {
      cursor: pointer;
      border: 1px solid green;
      line-height:18px
    }

我知道如何在不同浏览器的容器底部均衡距离标签的距离吗？

Answer 1

♦在你的css＆gt;在from rest_framework.exceptions import ValidationError class ImageDetailsViewSet(generics.ListCreateAPIView): queryset = ImageDetails.objects.all() serializer_class = ImageDetailsSerializer def create(self, request, *args, **kwargs): serializer = self.get_serializer(data=request.data) if not serializer.is_valid(): print(serializer.errors) # or better use logging if it's configured raise ValidationError(serialize.errors) self.perform_create(serializer) headers = self.get_success_headers(serializer.data) return Response(serializer.data, status=status.HTTP_201_CREATED, headers=headers) 内添加：

.container{ }

我在3个浏览器中测试它＆gt; chrome + safari + firefox - 以及它的全部工作：Result

  

☼注意：z-index适用于定位元素列表，如：
  （职位： 绝对 ，职位： 相对 ，职位： 已修复 ）或（显示： flex ）。