css スプライト テクニックを使用して、適切なロールオーバー効果を再現しようとしています。今まで、私はこの結果を達成することができましたhttp://iltuttologo.com/index.php/abarabino マウスを街の上に置くと、画像がその夜のバージョンに置き換えられ、Firefox 以外ではすべて正常に動作します不要な中央境界線があります。
これは私が使用したcssです：
@charset "utf-8";
/* CSS Document */
#mondo {
border: none;
border: hidden;
}
.tab {
width: 840px;
padding: 0px;
margin: 0px;
}
.tab td {
display: inline-block;
padding: 0px;
margin: 0px;
width: 420px;
}
a.evento1 {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px 0px no-repeat;
float: left;
border: none;
}
a.evento1:link {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -780px no-repeat;
float: left;
border: none;
}
a.evento1:hover {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px 0px no-repeat;
float: left;
border: none;
}
a.evento2 {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) -420px 0px no-repeat;
float: left;
border: none;
}
a.evento2:link {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) -420px -780px no-repeat;
float: left;
border: none;
}
a.evento2:hover {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) -420px 0px no-repeat;
float: left;
border: none;
}
a.evento3 {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -260px no-repeat;
float: left;
border: none;
}
a.evento3:link {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -1040px no-repeat;
float: left;
border: none;
}
a.evento3:hover {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -260px no-repeat;
float: left;
border: none;
}
a.evento4 {
display: block;
height: 520px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) -420px -260px no-repeat;
float: left;
border: none;
}
a.evento4:link {
display: block;
height: 520px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) -420px -1040px no-repeat;
float: left;
border: none;
}
a.evento4:hover {
display: block;
height: 520px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) -420px -260px no-repeat;
float: left;
border: none;
}
a.evento3_extra {
display: block;
height: 520px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -260px no-repeat;
float: left;
border: none;
}
a.evento3_extra:link {
display: block;
height: 520px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -1040px no-repeat;
float: left;
border: none;
}
a.evento3_extra:hover {
display: block;
height: 520px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -260px no-repeat;
float: left;
border: none;
}
a.evento5 {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -520px no-repeat;
float: left;
border: none;
}
a.evento5:link {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -1300px no-repeat;
float: left;
border: none;
}
a.evento5:hover {
display: block;
height: 260px;
width: 420px;
text-indent:-9999px;
background:url(../images/sprite.png) 0px -520px no-repeat;
float: left;
border: none;
}
メインの htlm ページには、上記の css をロードするテーブルを配置しました。ここにも html ページがあります。
<table id="mondo" style="margin-left: auto; margin-right: auto; margin-top: 15px;">
<tbody>
<tr class="tab">
<td><a class="evento1" href="#"><img src="images/trasparent_background_260.gif" border="0" alt="Tiziana 50th Birthday" /></a></td>
<td><a class="evento2" href="#"><img src="images/trasparent_background_260.gif" border="0" alt="Tiziana & Adriano Wedding" /></a></td>
</tr>
<tr class="tab">
<td><a class="evento3" href="#"><img src="images/trasparent_background_260.gif" border="0" alt="Adriano 70th Birthday" style="float: left;" /></a><a class="evento5" href="#"><img src="images/trasparent_background_260.gif" border="0" alt="Adriano 60th Birthday" style="float: left;" /></a></td>
<td><a class="evento4" href="index.php/abarabino/new-york"><img src="images/trasparent_background_520.gif" border="0" alt="Tiziana 60th Birthday" /></a></td>
</tr>
</tbody>
</table>
Chrome、IE9、Safari では良好なビジュアライゼーションを取得できますが、Firefox では不要なスペースがあります。
Firefox でこのような動作をする理由を理解するのを手伝ってもらえますか?