0

PHPで動的にロードされる画像ギャラリーがあります。クロムでは次のようになります。

ie8 では次のようになります。

HTML と PHP は次のとおりです。

while($row = mysql_fetch_array($result)) {

$parent = $row["parent_business_id"];
$image = $row["image_url"];
$alt = $row["alt_tag"];
$description = $row["description"];
$thumb = $row["thumb_url"];
$business = $row["business"];

$mainthumb = "./images/270x270/$image.jpg";

echo

"<li>

<div class='gallery_image_container'>

<a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>

</div>

</li>";

}

?>

そして、CSS は次のようになります。

.gallery_container {
margin: 0 0 0 -10px;
padding: 0;
list-style: none;
}

.gallery_container > li {
margin: 0 0 0 10px;
padding: 0;
float: left;
display:inline;
}

div.gallery_image_container{
width:270px;
height:270px;
padding:20px;
margin-bottom:10px;
background-color:white;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,.2) 0px 0px 6px;
-moz-box-shadow:  rgba(0,0,0,.2) 0px 0px 6px;
box-shadow:  rgba(0,0,0,.2) 0px 0px 6px;
float:left;
display:block;
}

a.gallery_darken {
display: block;
background: black;
padding: 0;
width:270px;
height:270px;
float:left;
}

a.gallery_darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

a.gallery_darken:hover img {
opacity: 0.7;
}

li アイテム内で div を使用することに不安を感じていますが、境界線と影を追加するために使用できる他の方法がわからないため、これが問題の原因である可能性があります。私は本質的にギャラリーがクロムと同じようにie8で見えるようにしたいと思っていますが、フロート：左とディスプレイ：インラインを含むdivと画像に追加しようとしましたが、画像がie8で整列しない理由について途方に暮れています. どんな助けでも大歓迎です。

4

1 に答える 1

1

あなたが見たいものに基づいて、私はあなたがあまりにも浮かんでいると思います. フロートは必要な場合にのみ使用し、後で必ずクリアしてください。これを試して：

HTML:

<ul class="image-gallery">   
    <li>
        <a href="#" title="Click me!"><img src="somesource.png" alt="Description" /></a>   
    </li>

  <!-- repeat for each image -->

    <li>
        <a href="#" title="Click me!"><img src="somesource.png" alt="Description" /></a>
    </li> 
</ul>

CSS:

ul.image-gallery { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; /* clear floats */
}
ul.image-gallery li {
  width:270px;
  height:270px;
  float:left;
  padding:20px;
  margin: 0 10px 10px 0;
  background: #ffffff;
  border-radius: 3px;
  box-shadow:  rgba(0,0,0,.2) 0px 0px 6px;
}
ul.image-gallery a {
  display: block;
  transition: all 0.5s linear;
}
ul.image-gallery a:hover {
  opacity: 0.7;
}
于 2013-02-08T11:17:48.253 に答える