CSS3 Scale 不适用于 Firefox 34.0.5 中的 <a>

Question

我有一个关于使用 CSS3 比例变换的问题。谁能解释为什么这种比例转换在 Firefox(目前使用 34.0.5)中不起作用，但在 Opera 中却起作用？

HTML:

<a href="#">hover me!</a>

CSS:

a {
  -webkit-transform: scale(1);
     -moz-transform: scale(1);
      -ms-transform: scale(1);
       -o-transform: scale(1);
          transform: scale(1);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover {
  -webkit-transform: scale(1.5,1.5);
     -moz-transform: scale(1.5,1.5);
      -ms-transform: scale(1.5,1.5);
       -o-transform: scale(1.5,1.5);
          transform: scale(1.5,1.5);
}

>> JSFiddle here <<

Answer 1

将链接设置为display: inline-block。

Updated Fiddle

---

Link 是一个内联元素。并且不能将 CSS 转换应用于 mentioned here。 :

Transforms apply to transformable elements.

Transformable elements are :

A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].