如何通过CSS实现desty_block类整个div区域（含图片）可点击？

你当前使用的绝对定位铺满a标签的方案本身兼容性尚可，可支持所有现代浏览器及IE10以上版本，但存在两个可优化的问题：

• 文字样式和点击层逻辑耦合，后续修改.desty_block高度时，文字的padding-top需要同步调整，维护成本高
• 如果区块内后续新增其他交互元素，会被z-index:100的a标签遮挡，无法正常触发交互

以下是两种更稳妥的实现方案，可根据你的业务场景选择：

方案1：调整HTML结构（最优，兼容性最强） #

HTML5规范支持a标签嵌套块级元素，该方案不需要复杂的定位配置，语义更清晰，兼容所有支持HTML5的浏览器（包含IE11）。
修改后的HTML结构：

<div class="desty_block">
  <a href="#">
    <figure><img src="image"></figure>
    <div class="detail">
      <h3>India</h3>
    </div>
  </a>
</div>

配套CSS仅需2行：

/* 让a标签撑满整个父容器 */
.desty_block a {
  display: block;
  text-decoration: none;
}

方案2：仅修改CSS（无法调整HTML结构时选用） #

如果你无法修改原有HTML结构，可以优化现有CSS实现，把文字样式和点击层逻辑解耦，避免后续维护问题：

.desty_block {
  position: relative;
}
/* 文字样式单独配置在h3上，和点击层分离 */
.desty_block h3 {
  margin: 0;
  color: #ffffff;
  text-align: center;
  padding-top: 7rem;
}
/* a标签仅作为点击层铺满父容器 */
.desty_block h3 a {
  position: absolute;
  /* inset等价于top/right/bottom/left都设为0，兼容IE11及以上 */
  inset: 0;
  z-index: 1;
  color: inherit;
  text-decoration: none;
}

注意事项 #

• 如果.desty_block内后续需要新增其他可交互元素（如按钮、次级链接），只需给新增元素设置z-index: 2即可正常触发交互，不会被点击层遮挡
• 两种方案均兼容所有主流移动端、桌面端设备，无兼容性问题

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