气泡内容溢出
气泡内容溢出
提问于 2014-05-05 17:42:14
我在css3中创建了一个气泡，但是在一些浏览器(特别是WindowsSafari5.1.7)中，我的span溢出了我的锚标记，尽管它的位置是相对的，而2)具有静态宽度/高度，存在隐藏溢出。在所有其他浏览器(火狐浏览器、IE浏览器、Chrome浏览器)中，它看起来都很好，但是锚链接(悬停)延伸到了气泡之外，因为它是显示块的，因此扩展到了span的宽度。
我的问题是，为什么它是溢出的，我如何解决它？我想用一个相对的位置，用一个绝对的元素把它放回原处，这不对吗？
这里有一个问题的JSFiddle。代码如下所示：
<!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>这是我在铬上一直遇到的一个例子，如果我将绿色(填充)或蓝色(宽度)悬停在鼠标指针中，这不是overflow: hidden应该链接的地方--它位于圆角之外。
Stack Overflow用户
回答已采纳
发布于 2014-05-05 19:08:39
这就是我想出来的..。溢出隐藏不适用于链接，只是在视觉上隐藏它
http://jsfiddle.net/88UeR/
它唯一的视觉不裁剪块级元素。
#a {
position:absolute;
border-radius:100px;
background-color:#72CEE0;
width:100px;
height:100px;
left:150px;
overflow:hidden;
}因此，如果您想要完全隐藏它，就必须使内部元素在父元素之外溢出，而不是在视觉上隐藏它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23478455
复制相关文章
相似问题
腾讯云开发者
