跨浏览器 - 我的按钮美学错误

Question

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

第一个问题是圆形背景，修正了。 第二个问题是背景的动画，修正了。

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

这是链接。

The code I'm working on

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

谢谢

Answer 1

将此添加到您的样式中：

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

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

考虑到FF问题，我无法帮助你。

Answer 2

强制.selected样式通过赋予它重要性。

background: #FFF600 !important;

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

border: 0.5em solid #FFF600;

请参阅DEMO。

修复了一系列其他问题，包括：

#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;