css - 跨浏览器 - 我的按钮有美学缺陷

Question

我正在尝试制作语言按钮。

第一个问题是圆形背景，解决了这个问题。第二个问题是背景动画，解决了这个问题。

现在在 FF 中，按钮在悬停时有一条丑陋的线条。

链接在这里。

我正在处理的代码

任何人都可以向我解释一下，这里出了什么问题，所以我可以尝试修复它。

谢谢

Answer 1

将此添加到您的样式中：

#languages li a.selected {
background: yellow;
}

这也应该为圆圈的中间着色。

考虑到 FF 问题，我无能为力。

Answer 2

.selected通过赋予其重要性来强制应用样式。

background: #FFF600 !important;

由于 Firefox 有显示问题box-shadow，请border改用。

border: 0.5em solid #FFF600;

见演示。

还修复了许多其他问题，包括：

#languages li { display: inline-block; width: 45px; }

因为边框占用了一些空间，并display:block;从#languages li a.

Answer 3

当您使用某些属性（如box-shadow）时，您也应该使用-moz-box-shadow并使用相同的参数。像使用 webkit 一样使用它，只是用 moz 代替。尝试添加-moz-border-radius

另外，试试背景剪辑？

    -webkit-background-clip: padding-box; 
    -moz-background-clip:    padding; 
    background-clip:         padding-box;