在具有边框半径的绝对定位的 div 中隐藏“a”标签的溢出答案

【问题标题】：Overflow hidden for an "a" tag inside an absolute positioned div with border-radius在具有边框半径的绝对定位的 div 中隐藏“a”标签的溢出
【发布时间】：2017-11-25 18:30:02
【问题描述】：

我试图将 a 标签包含在一个绝对定位的 div 内，边框半径为 100%。实际上，我想禁用在圆形父 div 之外单击链接的功能。但我做不到......我的印象是我可以隐藏溢出来做到这一点，但我仍然可以从“圆圈”外部点击链接。

有什么想法吗？

HTML

<div class="container">
  <div class="logo">
    <a id="logo-link" class="logo-link" href="#" title="WEBSITE">
      <img src="logo-sq.png" alt="LOGO">
      <div class="logo-text">
        <span class="site-title">SITE</span>
        <span class="slogan">SLOGAN</span>
      </div>
    </a>
  </div>
</div>

CSS

.container {
  position:relative;
}
.logo {
    right: 10px;
    top: 20px;
    width: 300px;
    height: 300px;
    position: absolute;
    padding: 2px;
    background: #fff;
    border: 4px dotted #022f66;
    border-radius: 100%;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
}
.logo-link {
    width: auto;
    height:300px;
    text-align: center;
    display: block;
    text-decoration: none !important;
    border: 1px solid;
}

https://jsfiddle.net/joomquery/7hwq5xc3/

【问题讨论】：

为什么要将链接 (.logo-link) 嵌套到包装器 (.logo) 中？
@ihmels 感谢您抽出宝贵时间发表评论 - 我最终没有外部 div - 但是如果内部元素（认为徽标 img）超出了圆圈，仍然可以从圈外。如果外部元素定位为绝对或类似的东西，则可能溢出在这种情况下不起作用......我必须强制内部图像的角保持在圆圈内。
是的，你是对的，但似乎只有基于 WebKit/Blink 的浏览器有这个问题。
我已更新my answer。此解决方案也适用于 Chrome。

标签： html css overflow css-position absolute

【解决方案1】：

如果你把边框半径放在锚点上并且溢出隐藏它会起作用

.container {
  position:relative;
}
.logo {
    right: 10px;
    top: 20px;
    width: 300px;
    height: 300px;
    position: absolute;
    padding: 2px;
    background: #fff;
    border: 4px dotted #022f66;
    border-radius: 100%;
    box-shadow: 2px 2px 10px;
    overflow: hidden;
}
.logo-link {
    width: auto;
    height:300px;
    text-align: center;
    display: block;
    text-decoration: none !important;
    border: 1px solid;
    border-radius: 100%;
    overflow: hidden;
}

<div class="container">
  <div class="logo">
    <a id="logo-link" class="logo-link" href="#" title="WEBSITE">
      <img src="logo-sq.png" alt="LOGO">
      <div class="logo-text">
        <span class="site-title">SITE</span>
        <span class="slogan">SLOGAN</span>
      </div>
    </a>
  </div>
</div>

【讨论】：

我打算发布相同的答案，但我真的不知道为什么在锚标签上添加 border radius and overflow hidden 是有效的，但不是在它的父标签上。你能解释一下吗？
感谢 Musa，这是我尝试过的方法 - 仍然无法正常工作...运行您的 sn-p 并将鼠标放在圆圈的左上角，在外面.. . 链接仍然可以点击...
@AbhishekPandey 我其实不知道，我猜是因为 div 的绝对定位
@Sbpro 我猜它依赖于浏览器或其他原因，因为它适用于我在最新的 chrome 上。
hmm，在 SO 和 jsfiddle 上，我使用的是 Safari，而您的 sn-p 无法使用 - 使用 Chrome，您的 sn-p 可以使用 - 但在实际的 html 页面上仍然无法使用（我已经在那里使用 Chrome）...无论如何感谢您的帮助。

【解决方案2】：

我会将样式直接应用到a 元素，然后环绕div 元素作为解决方法。我在 Firefox (54) 和 Chromium (58) 中对其进行了测试。

.container {
  position: relative;
}

.logo {
  position: absolute;
  right: 10px;
  top: 20px;
}

.logo a {
  border: 1px solid #022f66;
  border-radius: 50%;
  display: block;
  height: 300px;
  overflow: hidden;
  text-align: center;
  width: 300px;
}

.logo a::before {
  background: #fff;
  border: 4px dotted #022f66;
  border-radius: 50%;
  bottom: -6px;
  box-shadow: 2px 2px 10px #000;
  content: " ";
  left: -6px;
  position: absolute;
  right: -6px;
  top: -6px;
  z-index: -1;
}

<div class="container">
  <div class="logo">
    <a id="logo-link" class="logo-link" href="#" title="WEBSITE">
      <img src="logo-sq.png" alt="LOGO">
      <div class="logo-text">
        <span class="site-title">SITE</span>
        <span class="slogan">SLOGAN</span>
      </div>
    </a>
  </div>
</div>

【讨论】：