1

这个问题之前已经被问过（并回答过）： CSS：让块元素填充父元素的整个空间？

但是，接受的解决方案在 CHROME 中不起作用（如墨卡托评论中所述）。建议向 <tr> 元素添加 height:100 的修复也不起作用。有谁知道如何使用基于 webkit 的浏览器来实现这种效果？链接http://dl.getdropbox.com/u/26620/stackoverflow1.html（由原始海报提供）显示了这个问题。它适用于 FF/IE 但不适用于 chrome。

谢谢。

4

1 回答 1

1

我在 Chrome 中试过这个，它似乎工作得很好：http ://apptools.com/examples/tdcolor.php

这是css（称之为test.css）：

table.navbar {
   border-collapse: collapse;
}
table.navbar td {
   border: 1px solid #ccc;
}
table.navbar td a{
   display: block;
   width: 9em;
   padding: 3px;
   text-decoration: none;
}
table.navbar td a:link, table.navbar td a:visited {
   color: #000;
   background-color: #fff;
}
table.navbar td a:hover, table.navbar td a:active {
   color: #fff;
   background-color: #666;
}

还有一个示例 html 文件（记得更改 test.css 文件的路径）：

<html>
<head>
<link rel='stylesheet' href='CHANGE PATH TO YOUR test.css' type='text/css' media='all' />
</head>
<body>
<p><strong>Example:</strong></p>

<table border=0 cellspacing=0 cellpadding=0>
<tr>
<td><table border=0 cellspacing=0 cellpadding=0 class=navbar>
<tr>
<td class=navbar><a href="javascript:void(0);">First that is very, very, long to make sure that everything is working correctly <b 

style="color:black;background-color:#a0ffff">Link</b></a></td>
</tr>
<tr>
<td class=navbar><a href="javascript:void(0);">Another <b style="color:black;background-color:#a0ffff">Link</b></a> </td>
</tr>
<tr>
<td class=navbar><a href="javascript:void(0);">A Third <b style="color:black;background-color:#a0ffff">Link</b></a> </td>

</tr>
</table></td>
<td valign=top class=othercontent><p>Other content goes here.</p></td>
</tr>
</table>

</body>
</html>

那对你有用吗？

于 2011-01-10T10:09:33.627 回答