Bootstrap col-* 中的 IE/MS Edge 链接在页面加载时不起作用答案

【问题标题】：IE/MS Edge links in Bootstrap col-* not working on page loadBootstrap col-* 中的 IE/MS Edge 链接在页面加载时不起作用
【发布时间】：2016-06-10 07:17:47
【问题描述】：

所以我有这个非常简单的 Bootstrap 登陆页面，在 Chrome/Safari 等中一切正常，但是我今天发现当你使用 Microsoft 的 Edge 浏览器时，你无法点击某些链接。

该页面位于Slice Virtual Golf

仔细观察，似乎只有 Bootstrap col- parents 中的链接无法点击，有趣的是，如果您更改浏览器窗口大小或打开开发人员工具，那么链接就会神奇地启动可访问。

我进行了很好的搜索，发现了几个类似的问题，为 Microsoft 支持工程师留下了评论，该工程师建议解决需要干净启动的问题，但是对于我来说这似乎有点过分了看起来像一个错误。

如果有人知道此问题或可以快速查看代码，请告诉我您的想法，因为这太奇怪了，无法尝试解决。

【问题讨论】：

嗯...您是否可以重现该问题并将其包含在minimal reproducible example 中？有时这也可以帮助您自己找出问题的根源 - 将代码包含在您的实际问题中总是更好，而不是在场外资源中。
@Serlite 当然，我完全明白，通常代码是我正在处理的更大应用程序的一部分。然而，这是一个很小的单一登录页面，您只需要检查一些 HTML/CSS。而且，这很可能与整个页面相关，创建一个小版本可能不会成功。有机会我会尽快提出来。
我是 Microsoft Edge 团队的工程师，我看到了您所指的问题。我会进一步调查，试图建立一个减少。
@Sampson 太好了。如果您需要其他信息，请告诉我。

标签： html css twitter-bootstrap internet-explorer microsoft-edge

【解决方案1】：

这似乎是 Internet Explorer 和 Microsoft Edge 中的一个错误。我能够确定原因是 overflow: hidden 临时应用到正文，以及锚点的浮动/定位布局折叠下方。由于 overflow: hidden 样式，IE/Edge 似乎将这些链接（最初）确定为无法访问的链接。

我已将您的页面缩减为以下内容：

<!doctype html>
<html style="overflow-y: scroll; height: 100%;">
    <head></head>
    <body style="margin: 0; height: 100%">
        <a style="float: left; position: relative; margin-top: 1000px" href="#">Link</a>
        <script type="text/javascript">
            document.body.style.overflow = "hidden";
            setTimeout(function () {
                document.body.style.overflow = "visible";
            }, 2000 );
        </script>
    </body>
</html>

这种组合导致折叠锚无法正常工作。

已提交一个错误供 Microsoft Edge 团队评估此问题。

跟踪这个错误：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7843412/

【讨论】：

很好，这是一项伟大的工作。因此，如果边缘支持变得更加重要，我可以暂时找到解决方法。它是外部站点的 Splash 页面，它进行了这些调整，因此我可以修改或寻找不同的页面。让我们希望它尽快得到修复
@SandorA 如果您使用加载程序备份网站的某个版本，我可以帮助您尝试寻找另一种解决方法。