Question

我有一个包含三个单元格的表格，其中第一个和最后一个是超链接并显示在悬停上。

它完美无缺，但在Firefox中没有链接。我不知道为什么会这样。有什么想法吗？

HTML：

<table id="contentTable">
<tr>

<td class="pad" id="padL"><a href="http://valsday.tumblr.com/post/19617801125"></a></td>

<td id="centralc">
<a href="http://valsday.tumblr.com/post/19617801125"><img src="http://31.media.tumblr.com/tumblr_m15n6nMuyS1qbdh3do1_500.jpg"/></a>
</td>

<td class="pad" id="padR"><a href="http://valsday.tumblr.com/post/19617801125"></a></td>

</tr>
</table>

CSS：

 #contentTable {
    margin: 0 auto;
    max-width: 700px;
    border-collapse: collapse;
 }

 #centralc img, #centralc > img, #centralc > iframe {
    max-width: 500px;
    margin: 0 auto;
 }

 .pad {
     width: 100px;
     opacity: 0;
     filter: alpha(opacity=0);
     background-image: url('http://static.tumblr.com/cv6ot7o/pdanbhzio/pad.png');
     vertical-align: middle;

         -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
     -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
 }

 #contentTable:hover .pad {
filter: alpha(opacity=100);
opacity: 1;
    }

 #padR {
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
 }

 #padL {
     border-top-left-radius: 50px;
     border-bottom-left-radius: 50px;
 }

 .pad a {
    margin: 0 auto;
    padding: inherit;
    display: inline-block;
    width: 100%;
    height: 100%;
 }

Answer 1

高度：100％仅在设置了父高度时才有效。这对我来说是一个诀窍，它是一个肮脏的解决方案但是给你的想法，如果你想使用高度：100％，你必须设置所有父元素的高度。你也需要改变.pad a来显示：block，因为内联元素不能有固定的高度。

table, tbody, tr, td, a {
    height:100%;
}

表格单元格链接在Firefox中不起作用

1 个答案: