I am facing an issue with a CSS3 bubble that I created. In certain browsers, like Windows Safari 5.1.7, the span inside my anchor tag overflows, despite having a relative position, static width/height, and hidden overflow. While it appears fine in other browsers (Firefox, IE, Chrome), the anchor link on hover extends beyond the bubble due to the block display of the span.
I am curious as to why this overflow is happening and how I can resolve it. I had assumed that using a relative position with an absolute element would contain it, but it seems that may not be the case.
You can view the issue on this JSFiddle link. The code snippet is as follows:
<!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>
In Chrome, I notice that hovering over the Green (padding) or Blue (width) areas causes the cursor to change to a pointer, indicating that the link is outside the rounded corners despite using `overflow: hidden`.