Moz-border-radius 在 Firefox 上不起作用

Question

我有一个导航栏，因此当您将鼠标悬停在链接上时，它会改变颜色，并且左下角和右下角是圆形的。这似乎在chrome和某些版本的IE上工作正常，但在Firefox上则不行。我是否使用了错误的代码，或者 Firefox 根本不支持边框半径？我正在使用火狐版本22。

.CSS

    #nav li:hover a,#nav .active a
{
color:#4D4D4D!important;
-moz-border-radius-bottom-right:5px;
-moz-border-radius-bottom-left:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;

}

Answer 1

如果使用带前缀的属性，通常还应包含非前缀版本：

#nav li:hover a,#nav .active a
{
     -moz-border-radius-bottomright:5px;
     -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
          border-bottom-right-radius:5px;
          border-bottom-left-radius:5px;
}

根据 caniuse.com 的说法，Firefox在其当前版本中使用无前缀border-radius（实际上是从4.0版本开始）。

Answer 2

-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

工作正常。

Answer 3

在这种情况下，检查 caniuse.com 总是很有用的： http://caniuse.com/border-radius

它会让您知道某项功能是否可用。

编辑：但具体来说，似乎 moz 供应商的特定版本应该是

-moz-border-radius-bottomright:

从这里可以看出： https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius