填写父标记(td, div)的链接

如何使我的链接具有与父标记相同的高度和宽度，其中父标记的尺寸是可变的?

我在这里发现了这个问题，Gaurav Saxena发表了一篇文章，最初是有效的-直到我为HTML5添加了DOCTYPE。如果我这样做，它就不能在Firefox 8中工作了(但它在Chrome中仍然可以工作)。

完整的例子如下:

<!DOCTYPE html>
<head>
<style type="text/css">
.std {width: 200px; border: solid 1px green; height: 100%}
.std a {display: inline-block; height:100%; width:100%;}
.std a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
  <tbody>
   <tr>
    <td class="std">
     <a href="http://www.google.com/">Cell 1<br>
     second line</a>
    </td>
   <td class="std">
    <a href="http://www.google.com/">Cell 2</a>
   </td>
   <td class="std">
    <a href="http://www.google.com/">Cell 3</a>
   </td>
   <td class="std">
    <a href="http://www.google.com/">Cell 4</a>
   </td>
  </tr>
 </tbody>
</table>
</body>

提前感谢您的帮助!

$('td a').each(function(){
    $(this).css({
        'width': $(this).parent().width(),
        'height': $(this).parent().height()
    });
});

运行在文档DOM加载

这不起作用，因为您有一个百分比高度的百分比高度没有高度。为了澄清，链接上有height: 100%;，它将依赖于父元素(td)的高度。这也是100%，它依赖于它的父结点的高度，它没有设置。因此，它没有一个宽度的工作。解决这个问题的方法是在table或tds上设置一个高度。

示例:http://jsfiddle.net/8rRtZ/1/

相关内容

最新更新

热门标签：