IE7 で作成したサイトにバグが見つかりました。
サイトの URL: http://moldipaints-dokkum.nl/productcontroller/getProductList/19
IE7 で製品を開くと、ブートストラップ モーダルがページの後ろにあり、灰色のオーバーレイが上にあります。画像はモーダルの上にあります。
以下を変更しました。
css position : relative/absolute/fixed (モーダルのみ正しく表示されない)
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">×</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;}
前もって感謝します