Firefox似乎忽略了:: after元素父元素上的填充

问题描述

我想将向下箭头定位为warning: initialization from incompatible pointer type [-Wincompatible-pointer-types] int *p = name; 元素。在我测试过的任何浏览器中，它都能正常运行，除了Firefox。

这是Firefox中的外观：

这是在Chrome，Opera和Edge中的样子：

::after

.heading-wrapper {
      width: auto;
      display: inline-block;
      padding-left: 6rem;
    }
    
    .menu__dropdown-wrapper {
      position: relative;
      cursor: pointer;
    }
    
    .dropdown {
      position: relative;
      padding: 1rem;
    }

    .dropdown::after {
      content: "▼";
      font-size: 2rem;
      position: absolute;
      right: -1rem;
      bottom: -0.3rem;
    }

似乎忽略了填充。有谁知道为什么或者我可以做什么？我一直在尝试<div class="heading-wrapper menu__dropdown-wrapper"> <h1 class="dropdown"> <span class="first-letter heading-medium">Studio</span> <span class="first-letter heading-medium"></span> </h1> <div class="menu__dropdown-content"> // menu items here </div> </div>，padding，margin，top和bottom距离的不同组合，但结果始终是Firefox中的箭头是定位不正确。

编辑：

我注意到，当我在Firefox中调整视口大小时，由于right而导致font-size和paddings的变化，Media Queries会突然被识别-即使在整个宽度上我上面发布的示例。但是当我重新加载页面时，paddings又消失了。

编辑2：

这也不是我的浏览器特有的，因为它出现在Firefox移动版以及其他计算机上的Firefox中。

在打开开发工具的同时悬停在元素上时，显示paddings或paddings。但是箭头（如果有多个，则可以是多个单词，例如margins只是在Firefox中像Studio Photos一样粘在一起。

编辑3：

因此，这似乎使Firefox能够识别填充：

Studiogallery

不幸的是，它删除了第一个字母的格式。但这比在完全错误的位置在单词或箭头之间没有空格要好...

不过，如果有人知道问题可能是什么，我将不胜感激！在我看来，这仍然很奇怪。

解决方法

如果您使用的是::用于伪类将不支持，而是尝试:，它几​​乎支持所有浏览器