空的重叠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

我不确定这是错误还是浏览器之间的渲染行为不同。

但是一个简单的解决方法是使用z-index将可点击元素覆盖在空元素上。

将此添加到您的代码中：

.b {
   z-index: 1;
}

.grid {
  display: grid;
  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;
  z-index: 1; /* new */
}

.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>

Answer 2

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

指针事件：

.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>