Microsoft Edge 状态栏阻止按钮答案

【问题标题】：Microsoft Edge Status bar is blocking buttonsMicrosoft Edge 状态栏阻止按钮
【发布时间】：2016-04-05 07:52:25
【问题描述】：

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

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

边缘浏览器

铬

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

【问题讨论】：

你能分享你在那里渲染按钮的代码吗？
当你使用非常简单的 html 时，它已经发生了：<button>Test</button>
所以你根本没有定位它（或者它是父节点）？
它必须保持在左下角的位置。我无法改变它，所以我看不出这有什么关系。我看到当我将按钮更改为带有 href="#" 的链接和带有操作的 onclick 时，不会显示任何状态栏。这可能是一个解决方案，但我真的不喜欢它......
当您将鼠标悬停在它上面时，URL 工具提示不会移动到另一个底角吗？

标签： browser microsoft-edge

【解决方案1】：

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

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

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

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

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

.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;
}

我希望这会有所帮助。

【讨论】：

未来已经到来了吗？

【解决方案2】：

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

.divContainer { 填充：0px 0px 24px 0px; }

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

【讨论】：