html - Chromium 和 Firefox 之间的边距不一致

Question

我正在尝试为可以具有可变偏移量的按钮制作工具提示。我以为我找到了一个很好的解决方案，但是在另一个浏览器中测试时发生了一些奇怪的事情。下面的代码 ( and in this fiddle ) 将在 Chromium 72.0.3626.81 和 Firefox 66.0b3(均在 Arch Linux 上)之间以不同方式呈现。在 Chromium 上，它按预期显示，但在 Firefox 上，工具提示未正确偏移。在 Firefox 上，实际工具提示的边距减少了应有的一半。

为什么会发生这种情况，我如何才能使浏览器之间的预期行为保持一致？

:root {
    font-size: 62.5%;
    font-family: 'sans-serif';
    --tooltip-offset: 50px;
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link {
    border-radius: 4px;
    height: 4rem;
    font-size: 1.6rem;
    border: 1px solid hsl(215, 36%, 78%);
    padding: 0 1.5rem;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.tooltip {
    font-size: 1.4rem;
    z-index: 2;
    width: 225px;
    position: absolute;
    text-align: center;
    padding: 0.7rem 3rem;
    border-radius: 4px;
    pointer-events: none;
    top: 100%;
    margin-top: 12px;
    border: 1px solid black;
    margin-left: calc(0px - var(--tooltip-offset));
}

.tooltip:before {
    z-index: 1;
    content: ' ';
    position: absolute;
    bottom: 100%;
    border-color: transparent transparent black transparent;
    margin-left: var(--tooltip-offset);
    left: calc(50% - 12px);
    border-width: 12px;
    border-style: solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<div class="container">
    <a class="link" href="example.com">
        Go to example.com
    </a>
    <span class="tooltip">
        Click here to go to example.com
    </span>
</div>

Answer 1

我不确定 Firefox 和 Chrome 是否以不同方式处理负边距，因此更可靠的方法可能是使用转换:

:root {
    font-size: 62.5%;
    font-family: 'sans-serif';
    --tooltip-offset: 50px;
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.link {
    border-radius: 4px;
    height: 4rem;
    font-size: 1.6rem;
    border: 1px solid hsl(215, 36%, 78%);
    padding: 0 1.5rem;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.tooltip {
    font-size: 1.4rem;
    z-index: 2;
    width: 225px;
    position: absolute;
    text-align: center;
    padding: 0.7rem 3rem;
    border-radius: 4px;
    pointer-events: none;
    top: 100%;
    margin-top: 12px;
    border: 1px solid black;
    transform: translateX(calc(0px - var(--tooltip-offset)));
}

.tooltip:before {
    z-index: 1;
    content: ' ';
    position: absolute;
    bottom: 100%;
    border-color: transparent transparent black transparent;
    margin-left: var(--tooltip-offset);
    left: calc(50% - 12px);
    border-width: 12px;
    border-style: solid;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet"/>
<div class="container">
    <a class="link" href="example.com">
        Go to example.com
    </a>
    <span class="tooltip">
        Click here to go to example.com
    </span>
</div>

这看起来在我这边的两个浏览器中都能正常工作!