Question

我在css3中创建了一个气泡，但在某些浏览器（特别是Windows Safari 5.1.7）中，我的span溢出了我的锚标记，即使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的位置 - 它在外面圆角。

enter image description here

Answer 1

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

http://jsfiddle.net/88UeR/

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

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

所以如果你想完全隐藏它，你必须使内部元素不会溢出父元素以外的任何东西，除了在视觉上隐藏它

泡泡 - 内容溢出

1 个答案: