1
IE8で正しく動作しないCSSがあります。それはFF3でうまく動作しますが、IE8ではリスト項目の間に白いボックスがあり、全体がバグです。ここIE/FFの互換性に関するCSSの問題
は質問
#golist {
width:900px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
#listing {
list-style:none;
margin:0;
padding:0;
}
#listing li {
float:left;
display:block;
width:128px;
background:#fff;
border:1px solid #000000;
height:96px;
}
#listing li a {
border:none;
}
#listing p {
margin-bottom:0;
}
/* ---- show-hide elements ---- */
#listing li .show{
display:block;
width:128px;
height:96px;
}
#listing li .hide {
color:#121212;
text-align: left;
height: 0;
overflow: hidden;
background-image:url(bghover.png);
}
#listing li:hover .hide, #listing li.over .hide {
cursor: pointer;
height: 96px;
width:128px;
text-align:center;
}
#listing li:hover .show, #listing li.over .show {
height: 0;
overflow: hidden;
}
#listing li a, #listing li a:visited, #listing li a:active {
color:#121212;
font-size:12px;
text-decoration:none;
}
#listing li a:hover {
color:#121212;
text-decoration:none;
}
そして、ここでのCSSはコード自体である：
<div id=golist>
<ul id=listing>
<li class=show>
<a href=#>
<img src=images/image.jpg height=96px width=128px border=0>
</a>
<div class=hide>
<a href=link.html>Link</a>
<p>Some info</p>
</div>
</li>
</ul>
</div>
アイデアが画像と128x96ボックスを持つことです。マウスオーバーすると、レイヤーがテキストでポップアップします。