气泡 - 内容溢出答案

【问题标题】：Bubble - content overflowing气泡 - 内容溢出
【发布时间】：2014-06-22 02:35:28
【问题描述】：

我在 css3 中创建了一个气泡，但在某些浏览器（特别是 Windows Safari 5.1.7）中，我的跨度溢出了我的锚标记，即使 1）它是相对定位的，并且 2）具有一个隐藏的静态宽度/高度溢出。在所有其他浏览器（Firefox、IE、Chrome）中，它看起来不错，但锚链接（悬停）延伸到气泡之外，到 span 的宽度，因为它是显示块。

我的问题是，为什么会溢出，我该如何解决？我认为使用具有绝对元素的相对位置可以将其放回原处，这不正确吗？

这里有一个JSFiddle of the problem。代码如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">
        body    {background-color: #ccc;}
        a       {display: block; -moz-border-radius: 10em; -webkit-border-radius: 10em; border-radius: 10em; border: 5px solid #eee; width: 220px; height: 220px; overflow: hidden; position: relative; text-align: center; line-height: 24px; font-size: 20px; color: #fff; background-color: #fff;}
        .content{display: block; position: absolute; bottom: 0px; background-color: #000; width: 100%; padding: 20px 0 30px;}
    </style>
</head>
<body>
    <a href="javascript:void(0);">
        <span class="content">
            Test<br />
            Bubble
        </span>
    </a>
</body>

这是我在 chrome 上经常遇到的一个示例，如果我将鼠标悬停在绿色（填充）或蓝色（宽度）上，我的鼠标会进入一个指针，这不是链接应该在 overflow: hidden 的位置 - 它在圆形之外角落。

【问题讨论】：

锚链接没有溢出到跨度中。链接包含跨度块元素..我不明白这个问题
在 safari 6 中工作正常。
@nol 在特定的浏览器 (Safari) 中，红色延伸到圆形的核心之外，达到锚的全宽。在其他浏览器（Chrome、IE）中，红色不会显示，但指针（如果您将气泡悬停在右下角，圆角之外）会显示，这是不应该的。
你的小提琴在我的 Safari 中看起来不错（7.0.3，OSX 1.9.2）。还有什么红？您确定您发布的代码正确吗？
好的，这就是我认为可以解决的问题 .. 溢出似乎不起作用，所以您需要在此处的跨度上设置一个半径 jsfiddle.net/9rj9E/3 虽然非常有趣

标签： html css

【解决方案1】：

所以这就是我想出来的......溢出隐藏不适用于链接，只是在视觉上隐藏它

http://jsfiddle.net/88UeR/

它唯一的视觉不是块级元素的剪辑

#a {
position:absolute;
border-radius:100px;
background-color:#72CEE0;
width:100px;
height:100px;
left:150px;
overflow:hidden;
}

所以如果你想完全隐藏它，你必须让内部元素不会溢出到父元素之外，而不是在视觉上隐藏它

【讨论】：

感谢您的帮助，如果没有其他人出现，我可能会选择此选项，但从 SEO 的角度来看，这不是最佳选择。 overflow: hidden; 在我的小提琴中链接的顶部起作用，但不是底部，即跨度所在的位置。