问Chromium和Firefox之间的边距不一致
EN

Stack Overflow用户

提问于 2019-01-31 15:55:17

回答 1查看 38关注 0票数 0

我正在尝试为一个可以有可变偏移量的按钮制作一个工具提示。我认为我已经找到了一个很好的解决方案，但是当在另一个浏览器中测试时，发生了一些奇怪的事情。下面的代码(and in this fiddle)将在Chromium 72.0.3626.81和Firefox66.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>

html

css

firefox

cross-browser

chromium

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-31 16:08:23

我不确定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>