Microsoft Edge 状态栏阻止按钮

Question

Edge 浏览器的状态栏挡住了我正在使用的 Web 应用程序左下角的按钮。 Chrome 不会显示状态栏，因为按钮不是链接（如果是链接，状态栏会向右移开）。

首先，我认为微软应该对此做点什么，但现在有程序化的解决方案吗？

Edge 浏览器

Chrome

**编辑：我可以将按钮更改为带有 href="#" 和 onclick 操作的链接：这不会显示状态栏，但我想没有任何 css 解决方案，所以我不必更改标记在 100 页上（这是一个非常大的应用程序，屏幕上有不同的按钮）...

Answer 1

这是 Microsoft Edge 的一个已知问题。我们的团队已经调查了此事，并将在未来的版本中解决。该版本发布后，我将更新此答案。

目前，您可能会发现对 UI 进行细微调整可以完全避免此问题。例如，您可以定义一个区域，当进入该区域时，按钮会升高到已知的 tool-tip 区域之上：

在上面的示例中，我定义了一个包含链接的区域：

<div class="footer-links">
    <a href="/informatie">Informatie</a> 
    <a href="/wijzigen">Wijzigen</a>
    <a href="/verwijderen">Verwijderen</a>
</div>

然后我添加了一些填充以在 .footer-links 的顶部和各个 <a> 元素之间创建 space：

.footer-links {
    padding: 3em 1em 1em 1em;
}

最后，当元素的容器悬停时，我将元素向上过渡：

.footer-links a {
    display: inline-block;
    transition: transform .75s;
}

.footer-links:hover a {
    transform: translateY(-2em);
}

您可以使用边距完成转换，如果您愿意，也可以使用其他方法。我添加的另一个微妙效果是延迟第二个和第三个元素的过渡：

.footer-links a:nth-child(2) {
    transition-delay: .25s;
}

.footer-links a:nth-child(3) {
    transition-delay: .50s;
}

希望对您有所帮助。

Answer 2

我也有这个问题，日期是 2019 年 4 月。显然，Microsoft 的解决方案是放弃 Edge，转而使用基于 Chrome 的浏览器。我喜欢边。无论如何，重新定位 divs 的建议解决方案是荒谬的。如果您的按钮位于页面底部，则只需在包含 div 的底部添加填充，以使内容高于页面的绝对底部：

.div容器{ 填充：0px 0px 24px 0px; }

这对我有用。本质上，我们将页面底部向下移动 24 像素。

Microsoft Edge 状态栏阻止按钮

Microsoft Edge Status bar is blocking buttons

browser

microsoft-edge