Question

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

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

这可能是一个解决方法：将两个职位改为＆＃34;态度＆＃34;并将z-index更改为2＆amp; 3

祝你好运！

Answer 2

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

$('.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日期选择器并让浏览器处理该功能。

Answer 3

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

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

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

现在我甚至不需要使用z-index，它适用于IE。

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

3 个答案: