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处理负边距是否有所不同，因此更可靠的方法可能是使用transform：

: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>

在我这两个浏览器上都可以正常工作！

Chromium和Firefox之间的边距不一致

1 个答案: