Question

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

有一个＆＃34;旋转悬停＆＃34;按钮上的功能，当沿对角线悬停在按钮的左下角/右下角并移动到中心时，此毛刺特别明显。任何人都知道如何解决这个问题？

测试现场：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似乎在border-radius元素button上遇到问题（过去在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 -->

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

1 个答案: