推特Twitter的IE7的bug

我發現了一個在IE7中創建的網站的錯誤。該網站的推特Twitter的IE7的bug

網址：http://moldipaints-dokkum.nl/productcontroller/getProductList/19

當打開IE7中的產品引導模式是頁面和灰色覆蓋的背後，是在上面。和圖像在模態之上。

我改變了以下內容：

CSS位置：相對/絕對/固定（僅模式顯示不正確）

CSS的z-index：（沒有任何區別）

潛在修復微博（Github）; 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:<[email protected]$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引導

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

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

預先感謝您

來源

2012-05-03 Loed

對不起，編輯我的帖子 – Loed

我只是用另一種模式修復它。感謝您的時間。作爲參考：http：//www.queness.com/post/77/simple-jquery-modal-window-tutorial – Loed

請添加解決方案作爲答案，並接受其他人知道它的解決:) –

我在使用IE7中的模式彈出窗口時遇到了同樣的問題。模態對話框顯示在模態背景下。然而，加入這個JavaScript DID解決這個問題對我來說：

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

這裏

更多詳細信息：http://jsfiddle.net/ATeaH/8/

來源

2012-05-11 22:31:21

感謝您的好主意和全面的提琴：D –

我不能讚揚小提琴，鏈接是在問題。 –

我有同樣的問題，並最終由1固定的問題），確保我的所有模式對話框而不是在HTML層次結構中的嵌套需求，而是在根級別（在<body>之內）和2）在HTML文檔的末尾。

上述兩個條件可能有點矯枉過正，但它解決了我的問題。

來源

2012-06-11 19:23:25 iloveitaly

推特Twitter的IE7的bug

回答

相關問題