html - 空重叠的 css 网格单元会阻止在 Firefox 和 Edge 中点击

Question

在我们应用程序的一个页面中，我们有一个网格，其中两个单元格堆叠在一起。

在 Chrome 上，下面显示的网格中的中间文本框是可点击的，但在 Firefox 和 Edge(17) 中无法点击。

我很好奇哪个浏览器有这个错误，或者这是否是未定义的行为？

不过，Firefox 是否有解决方法？

谢谢。

.grid {
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  
  grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}

input {
  width: 100%;
}

.a {
  grid-area: 1 / 1 / span 1 / span 4;
}

.b {
  grid-area: 1 / 5 / span 1 / span 4;
}

.c {
  grid-area: 1 / 5 / span 1 / span 4;
}

.d {
  grid-area: 1 / 9 / span 1 / span 4;
}

<div class="grid">
  <div class="a">
    <input>
  </div>
  <div class="b">
    <input>
  </div>
  <div class="c">
  </div>
  <div class="d">
    <input>
  </div>
</div>

Stackblitz 链接:https://stackblitz.com/edit/js-pukd5g?file=index.html

Answer 1

您可以重置指针事件以允许单击元素，或重置位置以将元素置于静态元素之上:

指针事件:

.grid {
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}

input {
  width: 100%;
}

.a {
  grid-area: 1 / 1 / span 1 / span 4;
}

.b {
  grid-area: 1 / 5 / span 1 / span 4;
}

.c {
  grid-area: 1 / 5 / span 1 / span 4;
  pointer-events:none;/* here it won't catch mouse events */
}

.d {
  grid-area: 1 / 9 / span 1 / span 4;
}

<div class="grid">
  <div class="a">
    <input>
  </div>
  <div class="b">
    <input>
  </div>
  <div class="c">
  </div>
  <div class="d">
    <input>
  </div>
</div>

位置

.grid {
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  grid-template-rows: [first] repeat(2, minmax(auto, auto)) [last];
}

input {
  width: 100%;
  position:relative;/* will be at front of static positionned elements */
}

.a {
  grid-area: 1 / 1 / span 1 / span 4;
}

.b {
  grid-area: 1 / 5 / span 1 / span 4;
}

.c {
  grid-area: 1 / 5 / span 1 / span 4;
 
}

.d {
  grid-area: 1 / 9 / span 1 / span 4;
}

<div class="grid">
  <div class="a">
    <input>
  </div>
  <div class="b">
    <input>
  </div>
  <div class="c">
  </div>
  <div class="d">
    <input>
  </div>
</div>