Bulma导航栏下拉菜单在Internet Explorer 11中无法工作

Question

当我使用Internet Explorer 11导航到Bulma文档中的navbar部分（https://bulma.io/documentation/components/navbar/）时，即使给下拉菜单链接添加了“is-active”类，下拉菜单也不会显示。这也是我在自己的代码中遇到的情况。是否有一些polyfill或修复方法可以解决这个问题？

- William Mahlow

Answer 1

我在我的 Gatsby 项目中使用 Bulma 时遇到了同样的问题。我不确定是什么原因导致的，但幸运的是，我很容易地解决了它。Bulma 的 "is-hoverable" 类附带的样式规则非常简单。我只需将此代码添加到我的样式表（或样式组件）中:

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

这个与Bulma样式已有的内容相同。

当然，你可以通过一些其他属性和转换来使它更加抢眼。当然，我意识到这种方式有点抵消了使用CSS框架并只需在元素上添加一些类即可让它做某些事情的便利性。

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

希望这可以帮助你！

- Devon

Answer 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不理解:focus-within选择器,它将忽略整个内容。

只需删除包含: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来替代它。

- Freshleaf Media

Answer 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。

- Nabil Hassen