1

我正在尝试使用 css sprites 技术来重新创建良好的翻转效果。到现在为止，我能够获得这个结果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 &amp; 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 上有这种行为吗？

4

1 回答 1

1

嘿，现在删除display: inline-block;你的 td

像这样

.tab td {
    display: inline-block; //remove this line
    margin: 0;
    padding: 0;
    width: 420px;
}
于 2012-07-16T11:31:09.910 回答