表格中第一张图片超链接仅部分可点击，第二张正常的原因求助

问题出在你给.pennant和.logo加了position: absolute——绝对定位会让元素脱离文档流，表格里的<td>和<tr>不会因为这些元素的存在而撑开高度。第一个.pennant所在的<td>高度几乎为0，虽然图片能显示，但超链接的可点击区域要么被其他元素盖住，要么因为父容器没有高度导致点击范围异常；第二个.logo因为加了padding:300px 0，相当于给div本身撑出了空间，所以超链接能正常工作，但这不是正确的布局方式。

给你两个实用的解决思路：

思路1：去掉绝对定位，利用表格自带属性布局 #

表格本身已经提供了valign="Top"和valign="Bottom"来控制垂直位置，完全不需要用绝对定位来调整。修改后的代码如下：

修改后的CSS #

#webpage {
  width: 1000px ;
  margin-left: auto ;
  margin-right: auto ;
}

.pennant {
  padding: 0;
}

.logo {
  padding: 0;
}

HTML保持不变 #

原有的表格valign属性已经能实现你需要的垂直对齐效果，修改CSS后两个超链接都会正常响应点击。

思路2：保留绝对定位，修正父元素定位规则 #

如果你一定要用绝对定位，需要给包裹它们的<td>设置position: relative，让绝对定位的元素相对于<td>定位，同时确保<td>有足够的高度容纳元素：

修改后的CSS #

#webpage {
  width: 1000px ;
  margin-left: auto ;
  margin-right: auto ;
}

.pennant {
  position: absolute;
  top: 0;
  left: 0;
}

.logo {
  position: absolute;
  bottom: 0;
  left: 0;
}

td {
  position: relative;
  min-height: 400px; /* 设置最小高度，确保能容纳两张图片 */
}

修改后的HTML（可选） #

可以去掉<td>的valign属性，因为已经用绝对定位控制位置：

<body style="color:white">
  <div id="webpage">
    <hr id="home">
    <br>
    <table width="100%" border="0">
      <tbody>
        <tr>
          <td align="Left">
            <div class="pennant">
              <a href="https://link1.com/">
                 <img src="pennant.png" width="350" height="226">
              </a>
            </div>
          </td>
        </tr>
        <tr>
          <td align="Left">
            <div class="logo">
              <a href="https://link2.com/">
                <img src="logo.png" width="257" height="95">
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

这样调整后，两个图片的超链接都会正常工作。

内容的提问来源于stack exchange，提问作者pythonOnlyPls