jquery - firefox 上的 z-index - Internet Explorer 不工作。 Bootstrap 模态

Question

我有一个带有 jquery 日期选择器的 Bootstrap 模式。

日期选择器具有这种风格:

.datepicker{ z-index:1000;}

在 google chrome 上运行良好，它看起来像这样:

在 Internet Explorer 10/Firefox 中看起来像这样

这是模态 html:

<div name="fechaAprobacionModal<?php echo $i; ?>" id="fechaAprobacionModal<?php echo $i; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
    <h4 id="myModalLabel">Indicar Aprobaci&oacute;n de Facturas de Programas Especiales </h4>
  </div>
  <div class="modal-body">

            <p> <div class="texto_importante" style="margin-top:4px;"> Fecha Aprobaci&oacute;n: </div>  

                <div class="input-prepend">
                  <span class="add-on"><i class="icon-calendar"></i></span>

                   <input type="text" id="fechaid<?php echo $i; ?>" value="<?php echo date('Y-m-d') ?>"/>
                </div>

            </p>

  </div>
  <div class="modal-footer">
    <button class="btn btn-small" data-dismiss="modal" aria-hidden="true">Cerrar</button>
    <button class="btn btn-small btn-info" id="guardar<?php echo $i; ?>">Guardar</button> 
  </div>
</div>

关于如何解决这个问题的任何提示？

Answer 1

我做了以下事情:

<div class="input-prepend" style="z-index:4000;">

    <span class="add-on"><i class="icon-calendar"></i></span>
    <input style="z-index:2000;"  type="text" name="fecha_culminacion" id="fechaid<?php echo $i; ?>" value="<?php echo date('Y-m-d') ?>"/>

</div>

我给了父元素一个更高的 z-index。

我在这里找到了解决方案:internet explorer z-index bug