Bootstrap de Twitter IE7 error

Question

Encontré un error en un sitio que he creado en IE7.

URL del sitio: http://moldipaints-dokkum.nl/productcontroller/getProductList/19

Al abrir un producto en IE7 modal de arranque está detrás de la página y la superposición de color gris es en la parte superior. y las imágenes están en la parte superior de modal.

I cambió el siguiente:

posición css: relative/absoluta/fijo (Sólo modal no está mostrando correctamente)

css z-index: (no cualquier diferencia)

fix Potencial Twitter (Github); http://jsfiddle.net/ATeaH/8/

Ninguno de estos son correctos. ¿Qué puedo hacer para que esto funcione?

código de actualización del proyecto

la renderización de páginas

<?php 
    if(isset($productByType)){ 
     $countwidth = (count($productByType)/2)*260+100; 
    }?> 



    <div class="productView"> 
     <div class="aligndiv"> 
      <div class="productcenter"> 
       <div class="productenview"> 
        <div class="productcontainer" style="width:<?=@$countwidth?>px;" > 
         <?php 
         if(!empty($productByType)){ 
         for($i=0;$i < count($productByType); $i++){ 

         $id = $productByType[$i]['id']; 
         $title = $productByType[$i]['title']; 
         $img = base_url('/img/producten/'.$productByType[$i]["img"]); 

         if($i % 2 == 0){ 
          echo '<div class="seperatorforproduct">'; 
         //0,2,4,6,8 
         } 

        echo '<div class="button btnstyle">'; 
        echo '<div class="imgbtn">';  
        // <!-- afbeelding --> 
        echo '<img src="'.$img.'" title="'.$title.'" alt="'.$title.'" data-toggle="modal" href="#modal'.$id.'" />'; 
        echo '</div>'; 
        echo '<div class="txtbtn txtstyle">'; 
        echo '<a class="btn" data-toggle="modal" href="#modal'.$id.'" >'.$title.'</a>'; 
        echo '</div>'; 
        echo '</div>'; 
        ?> 
        <div class="modal" style="display:none;" id="modal<?=$id?>"> 
         <div class="modal-header"> 
          <a class="close" data-dismiss="modal">&times;</a> 
          <h2><?=$title?></h2> 
         </div> 
         <div class="modal-body"> 
          <div class="modal-left"> 
          <img src="<?=$img?>" title="<?=$title?>" alt="<?=$title?>" /> 
          </div> 
          <div class="modal-right"> 
          <p><?=$productByType[$i]['info']?></p> 
          </div> 
         </div> 
         <div class="modal-footer"> 
          Neem contact op met Moldipaints-Dokkum.nl voor meer informatie, telefoonnummer: 0519-297409 
         </div> 
        </div> 

        <?php 
        if($i % 2 == 1 || $i == count($productByType)){ 
         // 0,3,6,9,12 
         echo '</div>'; 
        } 
       }  
      }?> 
     </div> 
    </div> 
</div> 

CSS Bootstrap

.modal-backdrop { 
     position: fixed; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     z-index: 10; 
     background-color: #000000; 
    } 
    .modal { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     z-index: 1000; 
     min-height: 500px; 
     width: 700px; 
     margin: -275px -380px; 
     background-color: #ffffff; 
     border: 1px solid #999; 
     border: 1px solid rgba(0, 0, 0, 0.3); 
     *border: 1px solid #999; 
     /* IE6-7 */ 

     -webkit-border-radius: 6px; 
     -moz-border-radius: 6px; 
     border-radius: 6px; 
     -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
     -webkit-background-clip: padding-box; 
     -moz-background-clip: padding-box; 
     background-clip: padding-box; 
     } 

proyecto de estilos CSS

/* Producten */ 
    .productView{position:absolute; width:100%; height:700px; top:50px; margin:auto;} 
    .aligndiv{position:relative; width:1024px; margin:auto;} 
    .productcenter{width:1024px; height:500px; margin:auto;} 
    .productenview{position:relative; width:480px; height: 600px; overflow-x:scroll; overflow-y:hidden; float:left; left:10%; margin:auto; margin-right:300px} 
    .productcontainer{height: 400px; margin-top:90px; z-index:0;} 
    .productmenu{position:absolute; width:300px; top:100px; right:5%; z-index:0;} 
    .seperatorforproduct{position:relative; width:240px; height:480px; float:left;} 

Gracias de antemano

Answer 1

Estaba teniendo el mismo problema con el menú emergente modal en IE7. El cuadro de diálogo modal se muestra debajo del fondo modal. Sin embargo, la adición de este Javascript se soluciona el problema para mí:

$('.fixedVersion .modal').appendTo($("body")); 

detalle más aquí: http://jsfiddle.net/ATeaH/8/

Answer 2

que tenían el mismo problema y terminó fijación de la cuestión por 1) asegurándose de que todos mis diálogos modales eran no necesidad anidada en la jerarquía HTML, sino en el nivel raíz (justo dentro de <body>) y 2) al final del documento HTML.

Las dos condiciones anteriores pueden ser un poco exageradas, pero me solucionó el problema.