Bootstrap từ lỗi IE7 của Twitter

Question

Tôi đã tìm thấy lỗi trong trang web mà tôi đã tạo trong IE7.

URL của trang web: http://moldipaints-dokkum.nl/productcontroller/getProductList/19

Khi mở một sản phẩm trong IE7 các phương thức bootstrap là đằng sau những trang và lớp phủ màu xám là trên đầu trang. và hình ảnh trên đầu trang của phương thức.

tôi đã thay đổi như sau:

css position: relative/tuyệt đối/cố định (Chỉ có phương thức không hiển thị chính xác)

css z-index: (Không phải bất kỳ sự khác biệt)

tiềm năng sửa chữa Twitter (Github); http://jsfiddle.net/ATeaH/8/

Không có điều nào trong số này là chính xác. Tôi có thể làm gì để thực hiện công việc này?

Cập nhật Mã từ dự án

Trang render

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

dự án kiểu 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;} 

Cảm ơn bạn trước

Answer 1

Tôi đã gặp sự cố tương tự với cửa sổ bật lên phương thức trong IE7. Hộp thoại phương thức được hiển thị bên dưới phông nền phương thức. Tuy nhiên, thêm javascript này DID sửa chữa các vấn đề đối với tôi:

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

biết thêm chi tiết ở đây: http://jsfiddle.net/ATeaH/8/

Answer 2

tôi đã cùng một vấn đề và kết thúc sửa chữa vấn đề bằng cách 1) đảm bảo tất cả các hộp thoại modal của tôi đã không phải là nhu cầu lồng nhau trong cấu trúc phân cấp HTML, mà thay vào đó ở cấp cơ sở (ngay bên trong <body>) và 2) ở cuối tài liệu HTML.

Hai điều kiện trên có thể hơi quá mức, nhưng nó đã khắc phục sự cố cho tôi.