html - 是否可以在 Chrome 中创建带有圆角的链接？

Question

我似乎到处搜索，并尝试了多种方法，但找不到解决这个基本问题的方法。使链接适合圆角盒子内部而不会溢出。该示例在 Firefox 中运行良好，这让我更加困扰。

编辑：下面的路人做了这个很好的例子来更好地可视化问题：http: //jsfiddle.net/wjpdd/7/

我为这个问题找到的最佳解决方法是使用 javascript 使 div 可点击，并在 css 中设置 :hover 光标的样式。但如果有人有的话，我会喜欢一个不那么自私的选择

原始示例：

http://jsfiddle.net/wjpdd/3/

和html：

    <div class="circle">
      <a href="#" class="fill">
        <div class="circleoutline">
        </div>
      </a>
    </div>

CSS：

.circle{
    width: 310px;
    height: 310px;
    border-radius: 155px;
    background-color: grey;
    top: 18px;
    left: 10px;
    overflow:hidden;
}

.fill{
    width: 100%;
    height: 100%;
    border-radius: 155px;
}

.circleoutline{
    position: relative;
    top:5.5px;
    left:5.5px;
    width: 295px;
    height: 295px;
    border-radius: 150px;
    -webkit-border-radius:150px;
    border: 2px solid blue;
}