ट्विटर से बूटस्ट्रैप आईई 7 बग

Question

मुझे आईई 7 में बनाई गई साइट में एक बग मिला। साइट के

यूआरएल: http://moldipaints-dokkum.nl/productcontroller/getProductList/19

जब IE7 में एक उत्पाद बूटस्ट्रैप मोडल पेज और ग्रे ओवरले के पीछे है खोलने शीर्ष पर है। और छवियां मोडल के शीर्ष पर हैं।

सीएसएस स्थिति: रिश्तेदार/पूर्ण/फिक्स्ड (केवल मॉडल सही ढंग से नहीं दिखा रहा है)

सीएसएस z- सूचकांक: (नहीं कोई अंतर)

संभावित ठीक ट्विटर

मैं निम्नलिखित बदल (गीथूब); http://jsfiddle.net/ATeaH/8/

इनमें से कोई भी सही नहीं है। यह काम करने के लिए मैं क्या कर सकता हूं?

अद्यतन परियोजना से कोड

पृष्ठ प्रतिपादन

<?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> 

सीएसएस बूटस्ट्रैप

.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; 
     } 

सीएसएस शैली परियोजना

/* 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;} 

अग्रिम में धन्यवाद

Answer 1

मुझे आई 7 में मोडल पॉपअप के साथ एक ही समस्या का सामना करना पड़ रहा था। मोडल संवाद मोडल पृष्ठभूमि के नीचे प्रदर्शित किया गया था।

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

अधिक यहाँ विस्तार: http://jsfiddle.net/ATeaH/8/

Answer 2

मैं एक ही मुद्दा था और) 1 से समस्या दूर करने की बना रही है समाप्त हो गया यकीन है कि मेरे सभी मोडल संवाद थे हालांकि, इस जावास्क्रिप्ट जोड़ने मेरे लिए इस समस्या को ठीक DID एचटीएमएल पदानुक्रम में नेस्टेड आवश्यकता नहीं है, बल्कि रूट स्तर पर (<body> के अंदर दाएं) और 2) HTML दस्तावेज़ के अंत में।

उपरोक्त दो स्थितियां थोड़ा अधिक हो सकती हैं, लेकिन यह मेरे लिए समस्या तय कर दी गई है।