a元素尺寸大于父div时可点击区域受限的解决方法

问题本质 #

父级栅格容器宽度小于锚点内部元素实际渲染宽度，且父容器默认对溢出内容做了交互区域裁剪，即便锚点本身视觉尺寸正确，溢出父容器边界的部分也无法触发点击事件。 #

低侵入解决方案（无需修改原有类的全局CSS规则） #

所有方案均不改动现有样式表中定义的类规则，仅通过内联样式实现，不会影响站点其他使用相同类的元素。

• 方案一：仅修改a标签样式（侵入性最低，优先使用）
  给a标签补充如下内联样式，脱离父容器的交互区域裁剪限制：

  <a href="<?= base_url() ?>" style="display: inline-block; position: relative; z-index: 99; overflow: visible;">
  

  该方案通过定位建立独立的层叠上下文，调高z-index保证锚点不被其他元素遮挡，同时放开自身溢出限制，适配90%以上的同类场景。
• 方案二：父容器存在overflow:hidden时的适配
  如果方案一无效，说明外层带col-*类的栅格div默认设置了overflow: hidden裁剪溢出内容，不需要修改col类的全局样式，仅给两层父容器补充内联样式放开溢出即可：

  <div class="col-xs-12 col-sm-2 col-md-1" style="overflow: visible;">
    <div class="logo" style="overflow: visible; width: max-content;">
      <!-- 原有a标签内容不变 -->
    </div>
  </div>
  

  其中width: max-content会让.logo容器自动适配内部锚点的实际宽度，不会被栅格列的默认宽度限制。
• 方案三：极端场景兜底
  如果上述两个方案均不生效，给.logo容器设置相对定位，再将a标签设置为绝对定位，完全脱离父容器的宽度约束，同时保留原有视觉位置：

  <div class="logo" style="position: relative; min-height: 100px;"> <!-- min-height设置为logo图片实际高度，避免父容器高度塌陷 -->
    <a href="<?= base_url() ?>" style="display: inline-block; position: absolute; left: 0; top: 0; z-index: 99;">
      <!-- 原有图片内容不变 -->
    </a>
  </div>
  

注意事项 #

• 禁止给a标签或其父级元素设置pointer-events: none属性，该属性会直接让元素无法响应鼠标点击事件
• 如果调整后出现锚点被其他导航元素遮挡的情况，适当调高a标签的z-index数值即可
• 所有样式均使用内联写法，不需要修改原有全局类规则，满足不改动其他元素原有CSS的要求

内容的提问来源于stack exchange，提问作者Juliano de Miranda