当我删除 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>
最佳答案
由于<td>的高度未定义(在布局时确定)，height: 100%;它的 child 被忽略了。
设置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>
关于html:为什么 height 会因 doctype 而失败？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11278437/