Question

我有一个导航栏，当您将鼠标悬停在链接上时，它会改变颜色，左下角和左下角会变圆。这似乎在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;


}

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

moz-border-radius无法在firefox上运行

3 个答案: