2

我有时会通过在其顶部放置一个透明 div 来“保护”自定义 UI 控件。例如，我制作了一个交互式数据网格，当我想禁用它时，例如当我在它前面弹出一个对话框时，我将一个透明的 div 附加到网格的外部容器中，并拉伸了高度和宽度，以便它不可能点击任何东西。在下面的人为示例中，someFunction()单击“Blah”所在的位置时不会被调用，因为跨度将被透明保护器覆盖。

HTML：

<div class="control">
  <span class="clickable-example" onclick="someFunction()">Blah</span>
  <div class="protector"></div>
</div>

CSS：

.control {
  position: absolute;
  width: 100px;
  height: 20px;
}

.clickable-example {
  z-index: 0;
}

.protector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 20px;
  z-index: 1;
  background: transparent;
}

但是，我注意到在 Internet Explorer（甚至 10）中，这不起作用。似乎背景设置为透明的 div（使用 CSS 显式设置，或者根本不设置它隐式设置），div 不会阻止它下面的内容。我认为这是错误的，但我实际上无法从规范中看出它是错误的。规范只是说下面的东西会“发光”。它没有说背景是否应该像一块玻璃。

我已经恢复使用完全透明的图像而不是透明的 div，但我想知道是否有人对此有任何进一步的信息。（它与透明图像一起工作的事实证明这不是 z-index 问题）。

4

0 回答 0