Firefox上的z-index - Internet Explorer无法正常工作。 Bootstrap模态

Question

我有一个带jquery datepicker的bootstrap模式。

datepicker有这种风格：

.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

Answer 2

要使z-index在所有浏览器中正常工作，它需要将其位置设置为固定，绝对或相对。

.datepicker{ z-index:1000; position: relative; }

参考：w3schools