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

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

但是一个简单的解决方法是使用.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>

$ python --version
bash: /c/Users/Name/AppData/Local/Microsoft/WindowsApps/python: Permission denied

Answer 2

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

指针事件：

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

{{1}}

空的重叠CSS网格单元格可防止在Firefox和Edge中单击

2 个答案: