Bulma 导航栏下拉菜单在 Internet Explorer 11 中不起作用答案

【问题标题】：Bulma Navbar Dropdowns Not Working in Internet Explorer 11Bulma 导航栏下拉菜单在 Internet Explorer 11 中不起作用
【发布时间】：2019-10-20 06:46:52
【问题描述】：

当我使用 Internet Explorer 11 导航到 Bulma 文档 (https://bulma.io/documentation/components/navbar/) 的导航栏部分时，导航栏链接下拉菜单不会显示，即使它们被指定为“活动”类。这也是我对自己代码的体验。有一些 polyfill 或修复吗？

【问题讨论】：

标签： internet-explorer bulma

【解决方案1】：

我在 Gatsby 项目中使用 Bulma 时遇到了同样的问题。我不确定究竟是什么原因造成的，但幸运的是我能够相当容易地修补它。 Bulma “is-hoverable” 类附带的样式规则非常简单。我刚刚将它添加到我的样式表（或在我的情况下的样式组件）：

    @media (min-width: 1088px) {
     .navbar-item.is-hoverable:hover .navbar-dropdown {
        display: block;
        }
    }

这复制了 Bulma 样式中已有的内容。

当然，你可以用一些其他的属性和转换等等来把它弄得更生动一点。当然，我意识到这种方式否定了使用 CSS 框架的便利性，并且能够只将一些类放在一个元素让它做事。

我之前在其他地方看到过 Bulma 存在 IE11 问题。不记得它们是什么或它们是否已解决。我想我在这里得到的是，如果它被确定为一个问题，我可能不会指望 Bulma 的好人将其作为优先事项。可能值得研究确定原因并提出拉取请求。

希望这会有所帮助！

【讨论】：

【解决方案2】：

这个问题是由于浏览器忽略了整套 CSS 选择器，如果其中任何一个选择器包含他们不理解的选择器。

在这种情况下，负责使导航出现在悬停时的 CSS 如下：

.navbar.is-spaced .navbar-item.is-active .navbar-dropdown,
.navbar-item.is-active .navbar-dropdown.is-boxed,
.navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown,
.navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed,
.navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown,
.navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed,
.navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown,
.navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
  }

IE11 会忽略整个事情，因为it doesn't understand the :focus-within selector

只需删除包含:focus-within 的选择器即可修复它，如下所示：

.navbar.is-spaced .navbar-item.is-active .navbar-dropdown,
.navbar-item.is-active .navbar-dropdown.is-boxed,
.navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown,
.navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed,
.navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown,
.navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0)
  }

这显然会删除所有浏览器的功能，而不是你可以polyfill it

【讨论】：

【解决方案3】：

@media screen and (min-width: 1024px) {
    .navbar-item.is-active .navbar-dropdown.is-boxed {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

如果您使用 JavaScript 来切换“is-active”类，那么这将适用于所有浏览器，包括 IE 和 Edge。

【讨论】：