moz-border-radius 在 Firefox 上不起作用答案

【问题标题】：moz-border-radius not working on firefoxmoz-border-radius 在 Firefox 上不起作用
【发布时间】：2014-02-03 17:41:32
【问题描述】：

我有一个导航栏，当您将鼠标悬停在链接上时，它会改变颜色，并且左下角和右下角是圆角的。这似乎在 chrome 和某些版本的 ie 上运行良好，但在 Firefox 上却不行。我使用了错误的代码还是 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;


}

【问题讨论】：

您是否尝试过不带供应商前缀的 border-radius？
您没有使用标准属性

标签： html css firefox

【解决方案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 版开始）。

【讨论】：

哦，我明白了，这就是我的代码中缺少的内容。非常感谢！

【解决方案2】：

检查 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

【讨论】：

太棒了，感谢您的链接。我会注意的

【解决方案3】：

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

工作正常。

【讨论】：