2

当我删除 DOCTYPE 行时，此代码按我想要的方式工作。当将鼠标悬停在“单元格”单元格上并单击单元格内的任意位置时，“A”链接会填充“单元格”单元格的整个单元格高度。注意：我需要使用 A，而不是 TD onclick javascript。我不明白为什么添加 DOCTYPE 会破坏它，或者我能做些什么来正确修复它，这让我发疯了。我正在使用 IE9，但希望它可以在所有浏览器中运行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>X</title>
<style type="text/css">
table,td, th {border: 1px solid #000}
td a {display: block; height:100%; width:100%;}
td a:hover {background-color: yellow;}
</style>
</head>
<body>
<table>
<tr>
 <td>
    <a href="http://www.google.com/">Cell</a>
  </td>
  <td>
    <a href="http://www.google.com/"><img alt="x" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"></a>
  </td>
</tr>
</table>
</body>
</html>
4

1 回答 1

1

由于<td>未定义的高度（它在布局中确定），height: 100%;其子级的 被忽略。

设置的height和：line-height<td>

td { height: 100px; line-height: 100px; }

演示：http: //jsfiddle.net/ThinkingStiff/twVar/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>X</title>
    <style type="text/css">
        table,td, th {border: 1px solid #000}
        td a {display: block; height:100%; width:100%;}
        td a:hover {background-color: yellow;}
        td { height: 100px; line-height: 100px; }
        img { display: block; }
    </style>
</head>
<body>
<table>
    <tr>
    <td>
        <a href="http://www.google.com/">Cell</a>
    </td>
    <td>
        <a href="http://www.google.com/"><img alt="x" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png"></a>
    </td>
    </tr>
</table>
</body>
</html>

​</p>

于 2012-07-01T00:58:59.553 回答