css - IE 上的 z-index，无法获取按钮后面的 div 文本

Question

我在 IE 中遇到问题。我有一个按钮，在那个按钮上我有一个 div 文本显示一些文本。文本来自 javascript 并发生变化。 .ui-dp也是在js中生成的。即使上面有文字，我也需要单击该按钮。我使用了 z-index，它解决了除 IE 之外的所有问题。我尝试了从这里和谷歌找到的许多变体，但什么都没有。有人可以帮忙吗？

HTML 看起来像这样:

<div class="calendar">
  <button class="ui-dp"></button>
  <div class="js-timeperiod timeperiod"></div>
</div>

CSS 看起来像这样:

.calendar {
  display: inline-block;
  float: center;
  height: 28px;
  width: 200px;
}

.ui-dp {
  position: relative;
  z-index: 2;
  height: 28px;
  background-color: transparent;
  padding: 0px;
  border: 0;
  outline: 0;
  cursor: pointer;
  width: 200px;
  text-align: left;
  top: 0;
  left: 0;
}

.timeperiod {
  position: relative;
  z-index: 1;
  top: -30px;
  left: 32px;
  padding: 2px;
  text-align: center;
  height: 28px;
  width: 150px;
  float: center;
}

我必须指定它似乎有效，因为我单击了上面没有文本的 timeperiod 元素。但是当中间有文本时，它就不起作用了。

我用js代码做了一个jsfiddle。选择日期，然后会出现文本 example here

Answer 1

这可能是一个解决方案:将两个位置都更改为“态度”并将 z-index 更改为 2&3

祝你好运!