ICE上的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;
}

当我单击没有文本的时间段元素时，我必须指定它似乎可以工作。但是当中间有文字时，它就不起作用了。

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

Answer 1

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

祝你好运！

Answer 2

感谢大家的思考。我已经有了解决方案。 谢谢皮波！是的，一种解决方案是改用 datepicker 输入 - 使用标准堆叠，就像你说的那样，但我需要隐藏输入而不是使用它。

解决方案包括一些 javascript 扩展。我在 datepicker 的 onSelect 事件中写了一些额外的 js。我重写了在 datepicker 中生成的按钮的 outerHTML，并在 html 中的按钮下方添加了时间段。所以结果会是这样的：

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

现在我什至不需要使用 z-index，它可以在 IE 上运行。

Answer 3

我认为您可能需要重新考虑您的日期选择器。作为一般规则，始终让浏览器为您完成工作并使用标准堆叠（如果可能）。这样，您可以减少对性能和 SEO 更好的 CSS。我不确定您在寻找什么最终结果，但这里有一个遵循一般规则的替代版本。

$('.datepicker').datepicker({
	    showWeek: true,
	    firstDay: 1,
	    showOtherMonths: true,
	    selectOtherMonths: true,
	    dateFormat: "dd.mm.yy",
	    showOn: "both",
        buttonText: "Launch the Date Picker", // For accessibility purposes
	    buttonImage: 'http://www.aparchive.com/i/icon_datePicker_0001_calendar-default.png', // Change the url according to your need.
	    buttonImageOnly: false,
	    onSelect: function (dateStr, inst) {
            $('.datepicker').show(); // Show the input before inserting date
	        $('.datepicker').html(dateStr);
	    }
	});

.calendar {
    display: inline-block; /* You can also use block but it will be harder to align the element inside without specifying an height to chidlren elements */
    background: #e22e25; /* In case your linear gradient is not applied on older browser */
    background: -moz-linear-gradient(top, #E22E25, #AC170F);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#E22E25), to(#AC170F));
    background: -webkit-linear-gradient(top, #E22E25, #AC170F);
    background: -ms-linear-gradient(top, #E22E25, #AC170F);
    background: -o-linear-gradient(top, #E22E25, #AC170F);
    background: linear-gradient(to bottom, #E22E25, #AC170F);
    filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#E22E25', EndColorStr='#AC170F');
    border: 1px solid #B1241C;
    text-align: center; /* to center the input and button inside your div */
    width: 200px;
}
.calendar label { /* Hide the label from screen but make it readable by screen readers. Add .js before to apply this style when javascript is enable */
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.datepicker,
.ui-datepicker-trigger {
    vertical-align: middle; /* To align input and button */
    cursor: pointer;
    height: 28px;
}
.no-js .datepicker {
  /* Style according to your need */
}
.datepicker { /* Add .js before so that this style is applied when javascript is enable */
    background: none;
    border: none;
    color: #fff;
    padding: 0;
    display: none; /* Hide the input if no value has been entered */
}
.datepicker:focus {
  outline: 0;
}
.ui-datepicker-trigger {
    display: inline-block;
    width: 28px;
    border: none;
    background: none;
    padding: 0;
}
.ui-datepicker-trigger img {
  max-width: 70%;
  height: auto;
}

<!-- Jquery UI script -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<!-- end script -->

<div class="calendar">
    <label for="datepicker">Choose a date with the following format: dd.mm.yy</label>
    <input id="datepicker" type="text" class="datepicker" /> <!-- input elements don't have closing tag -->
</div>

然后将class="no-js" 添加到您的html 并添加以下脚本，以在启用javascript 时将您的no-js 替换为js：

<script>
   document.documentElement.className = document.documentElement.className.replace("no-js","js");
</script>

您还可以使用Modernizr 来了解您的客户端的浏览器是否支持input type="date"，这样在这种情况下您就无需加载jQuery UI 日期选择器并让浏览器处理该功能。