2

DOCTYPE行を削除すると、このコードは希望どおりに機能します。「A」リンクは、「セル」セルにカーソルを合わせてセル内の任意の場所をクリックすると、「セル」セルのセルの高さ全体を塗りつぶします。注：TD onclick javascriptではなく、Aを使用する必要があります。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 に答える