Microsoft Edge状态栏是阻止按钮

Question

Edge浏览器的状态栏阻止了我正在处理的Web应用程序左下角的按钮。 Chrome不会显示状态栏，因为按钮不是链接（如果链接状态栏会偏离右侧）。

首先，我认为微软应该对此采取一些措施，但目前是否有编程解决方案？

边缘浏览器

铬

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

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

我希望这会有所帮助。

Answer 2

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

.divContainer {padding：0px 0px 24px 0px; }

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