防止 Firefox 中的圆形按钮在圆圈外可点击

Question

在 Firefox 中，我的圆形按钮的可点击区域似乎以正方形的形状延伸到圆形之外。这在 Chrome/Safari 中不会发生，它可以正确显示所有内容。

按钮上有一个“悬停时旋转”功能，当将鼠标悬停在按钮的左/右下角对角线并移动到中心时，此故障尤其明显。有人知道如何解决这个问题吗？

测试站点：http://parkerrichard.com/new/index.html

HTML

    <nav class="centered" role="navigation">
    <div class="container">
        <div class="centered">
            <ul>
                <li>
                    <a href="#"><button class="design"></button></a>
                </li>
                <li>
                    <a href="#"><button class="photo"></button></a>
                </li>
                <li>
                    <a href="#"><button class="music"></button></a>
                </li>
                <li>
                    <a href="#"><button class="art"></button></a>
                </li>
                <li>
                    <a href="#"><button class="parker"></button></a>
                </li>
            </ul>
        </div>
    </div><!--/container -->
</nav><!--/navbar -->

CSS

nav {
    margin-top: 20px;
    margin-bottom: 80px;
}

nav ul {
    list-style: none;
    margin: 10px 0 0 -30px;
}

nav li a {
    font-size: 25px;
}

nav button {
    width: 100%;
    opacity: .1;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}

nav button:hover {
    opacity: .5;
}

.art:hover, .music:hover, .photo:hover, .design:hover {
    -webkit-animation:spin 2s ease;
    -moz-animation:spin 2s ease;
    animation:spin 2s ease;
}
@-moz-keyframes spin { 10% { -moz-transform: rotate(18deg); } }
@-webkit-keyframes spin { 10% { -webkit-transform: rotate(18deg); } }
@keyframes spin { 10% { -webkit-transform: rotate(18deg); transform:rotate(18deg); } }


nav button {
    border-radius:50%;
    position: absolute;
    opacity: 50% !important;
    left: 50%;
    right: 50%;
}

.parker {
    margin-top: 196px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background: transparent url('../img/parker.jpg');
    background-size: 100%;
    opacity: 1 !important;
}

.art {
    margin-top: 144px;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background: transparent url('../img/art.jpg');
}

.music {
    margin-top: 96px;
    margin-left: -198px;
    width: 400px;
    height: 400px;
    background: transparent url('../img/music.jpg');
}

.photo {
    margin-top: 48px;
    margin-left: -248px;
    width: 500px;
    height: 500px;
    background: transparent url('../img/photo.jpg');
}

.design {
    margin-left: -296px;
    width: 600px;
    height: 600px;
    background: transparent url('../img/design.jpg');
}

Answer 1

Firefox 似乎在 button 元素上的 border-radius 存在问题（过去在 webkit 浏览器中也存在问题，请参阅：Button border radius and cursor）。这可能会在未来的版本中得到解决，但我建议改用 div。

以下应该可以工作 (here also a codepen)：

nav {
    margin-top: 20px;
    margin-bottom: 80px;
}

nav ul {
    list-style: none;
    margin: 10px 0 0 -30px;
}

nav li a {
    font-size: 25px;
}

nav li div {
    width: 100%;
    opacity: .1;
    transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    -webkit-transition: opacity .7s ease-out;
    -o-transition: opacity .7s ease-out;
}


nav li div:hover {
    opacity: .5;
}

.art:hover, .music:hover, .photo:hover, .design:hover {
    -webkit-animation:spin 2s ease;
    -moz-animation:spin 2s ease;
    animation:spin 2s ease;
}
@-moz-keyframes spin { 10% { -moz-transform: rotate(18deg); } }
@-webkit-keyframes spin { 10% { -webkit-transform: rotate(18deg); } }
@keyframes spin { 10% { -webkit-transform: rotate(18deg); transform:rotate(18deg); } }


nav li div {
    border-radius:50%;
    position: absolute;
    opacity: 50% !important;
    left: 50%;
    right: 50%;
}

.parker {
    margin-top: 196px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background: transparent url('http://parkerrichard.com/new/img/parker.jpg');
    background-size: 100%;
    opacity: 1 !important;
}

.art {
    margin-top: 144px;
    margin-left: -150px;
    width: 300px;
    height: 300px;
    background: transparent url('http://parkerrichard.com/new/img/art.jpg');
}

.music {
    margin-top: 96px;
    margin-left: -198px;
    width: 400px;
    height: 400px;
    background: transparent url('http://parkerrichard.com/new/img/music.jpg');
}

.photo {
    margin-top: 48px;
    margin-left: -248px;
    width: 500px;
    height: 500px;
    background: transparent url('http://parkerrichard.com/new/img/photo.jpg');
}

.design {
    margin-left: -296px;
    width: 600px;
    height: 600px;
    background: transparent url('http://parkerrichard.com/new/img/design.jpg');
}

<nav class="centered" role="navigation">
    <div class="container">
        <div class="centered">
            <ul>
                <li>
                    <a href="#"><div class="design"></div></a>
                </li>
                <li>
                    <a href="#"><div class="photo"></div></a>
                </li>
                <li>
                    <a href="#"><div class="music"></div></a>
                </li>
                <li>
                    <a href="#"><div class="art"></div></a>
                </li>
                <li>
                    <a href="#"><div class="parker"></div></a>
                </li>
            </ul>
        </div>
    </div><!--/container -->
</nav><!--/navbar -->