Chromium和Firefox之间的边距不一致
Chromium和Firefox之间的边距不一致
提问于 2019-01-31 23:55:17
我正在尝试为一个可以有可变偏移量的按钮制作一个工具提示。我认为我已经找到了一个很好的解决方案，但是当在另一个浏览器中测试时，发生了一些奇怪的事情。下面的代码(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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-01 00: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>
在我这一端，它看起来在两个浏览器上都能正常工作！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54464451
复制相关文章
相似问题
腾讯云开发者
