在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');
}