Question

我在IE7中创建的网站中发现了一个错误。

网站的网址：http://moldipaints-dokkum.nl/productcontroller/getProductList/19

在IE7中打开产品时，引导模式位于页面后面，灰色叠加层位于顶部。并且图像位于模态之上。

我更改了以下内容：

css位置：相对/绝对/固定（仅模态未正确显示）

css z-index :(没有任何区别）

潜在修复Twitter（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:<?=@$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;
      }

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

提前谢谢

Answer 1

我在IE7中遇到了与模式弹出窗口相同的问题。模态对话框显示在模态背景下方。但是，添加此javascript DID可以解决我的问题：

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

此处提供更多详细信息：http://jsfiddle.net/ATeaH/8/

Answer 2

我遇到了同样的问题并最终修复了这个问题：1）确保我的模态对话框在HTML层次结构中是不嵌套需要，而是在根级别（在{{ 1}}）和2）在HTML文档的末尾。

上述两个条件可能有点矫枉过正，但它为我解决了这个问题。

来自Twitter IE7 bug的Bootstrap

2 个答案: