让元素无法集中 - IE漏洞？

Question

我有一个带有几个图标的弹出菜单，用户必须单击该图标才能在该菜单中接收其他选项。菜单是一个带有tabindex设置的div，以便它可以获得焦点，并且其focusout处理程序设置为关闭菜单。图标没有tabindex，因此点击它们不应该关闭菜单，这在Chrome / FF中可以正常工作。但是，在IE中，单击图标似乎会关闭菜单。在这里发生了什么？

我做了一个小提琴来进一步测试，并观察到一些非常奇怪的行为： http://jsfiddle.net/mdd7kqxm/3/

如果您打开菜单并单击文本，菜单将关闭（在IE中）。但是，如果您从菜单项中删除width属性，它将不再获得焦点并导致菜单关闭。 width属性如何影响元素获得焦点的能力？用任意名称（如div）替换foo元素也可以防止此行为。

这是小提琴代码：

// css
.menubox {
    z-index: 10;
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid black;
    display: none;
    left: 100px;
    top: 100px;
}
.menuitem {
    width: 40px;
}

// html
<div id="showbtn">Show menu</div>
<div class="menubox" tabindex="1">
    <div class="menuitem">Hello</div>
</div>

// js
$("#showbtn").click(function() {
    $(".menubox").show().focus();
});
$(".menubox").focusout(function() {
    $(this).hide();
});