css – 悬停零高度元素：浏览器错误？

在使用鼠标悬停父菜单项时,(un)折叠的子菜单中,遇到以下问题.考虑以下标记(在 JSFiddle下方或之上).

ul {
  max-height: 0;
  overflow: hidden;
  margin: 10px;
  padding: 0;
  border: 10px solid #bada55;
  list-style-type: none;
  transition: border-color .4s;
}
ul:hover {
  max-height: 100px;
  border-color: #de2d26;
}

ul > li {
  padding: 10px;
  pointer-events: auto;
}

.ignorant {
  pointer-events: none;
}

.offset {
  position: relative; /* This is the culprit! */
}

<ul class="ignorant">
  <li>I am ignorant of your pointer.
      If you see me,something went wrong!</li>
</ul>
<ul>
  <li>I am not. Hover me!</li>
</ul>
<ul class="ignorant offset">
  <li>I should be ignorant of your pointer.
      If you see me,something went wrong!</li>
</ul>

建立.我们有三个列表,其中内容是隐藏的,因为列表的max-height设置为0.边框仍然显示,这是预期的行为：元素by default的height指令仅适用于元素的内容.

我们通过将max-height设置为足够大的值来显示列表的悬停内容.

现在,我想使列表只有当内容被悬停而不是边框​​时才可见.我认为,应该使用pointer-events可以实现,如上所示.忽略边界上的事件,并重新启用列表中的项目.

问题.到目前为止,这么好,这在Firefox和Chrome中都可以正常工作.也就是说,当我定位容器relative时,可以触发Chrome中的内容悬停.

Firefox仍然像我所期望的那样工作,不会触发悬停.当没有边框时,Chrome中不可能触发悬停.

题.这是Chrome中的错误吗？还是没有明确规定如何处理这种情况,因此是不明确的行为？我将对以下任何一种感兴趣：
一个解释我在做错什么,为什么;
2.在这种情况下,为什么不同浏览器的行为方式不一样？
3.简要说明为什么这是一个错误.在这种情况下,我很乐意报告一个.

这是测试,在这一刻,与
&安培;子弹; Firefox 52.0.1(64位Linux N);
&安培;子弹; Firefox 52.0.2(64位Windows N);
&安培;子弹; Internet Explorer 11.0.9600.17031(64位Windows N);
&安培;子弹; Chrome 57.0.2987.133(64位Linux S,64位Windows S);
&安培;子弹; Chromium 57.0.2987.98(64位Linux S).
S表示,当使用相对定位时,N表示悬停时未显示.

感谢BoltClock通过他们的建设性意见更好地提出这个问题.

解决方法

我没有这方面的官方解释,但我知道它与块格式化环境有关( MDN,W3C).我也非常有信心 @BoltClock,他对BFC有一个透彻的了解(我有时怀疑他首先写的规范),将能够提供一个确切的技术解释,他是否希望这样做.

简而言之,知道来源是知道修复(测试和工作)：当您需要设置位置：相对于父对象时,还设置位置：相对于子对象：

/* ... */
.offset {
  position: relative; /* This is the culprit! */
}
.offset > * {
  position: relative; /* And this is the fix! */
}

ul {
  max-height: 0;
  overflow: hidden;
  margin: 10px;
  padding: 0;
  border: 10px solid #bada55;
  list-style-type: none;
  transition: border-color .4s;
}
ul:hover {
  max-height: 100px;
  border-color: #de2d26;
}

ul > li {
  padding: 10px;
  pointer-events: auto;
}

.ignorant {
  pointer-events: none;
}

.offset {
  position: relative; /* This is the culprit! */
}
.offset > * {
  position: relative; /* And this is the fix! */
}

<ul class="ignorant">
  <li>I am ignorant of your pointer.
      If you see me,something went wrong!</li>
</ul>

那就是你想要的,对吧？跨浏览器.

注意：它不一定是相对的.它必须是静态的.