title: How to simulating css zoom in firefox?
body: <p>I use this code for a menu in my site but now testing it cross-browser I see there is not compatible with firefox.</p>
  
  <pre><code>li {
      display: inline-block;
      list-style: none inside none;
      text-align: center;
  }
  li a:before {
      content:"";
      display: block;
      border-radius: 50%;
      width: 62px;
      height: 62px;
      background: #F00;
      margin: 0 auto 14px;
      transition: all .2s;
  }
  ul.small li a:before {
     -webkit-transform: scale(0.7);
     -moz-transform: scale(0.7);
     -ms-transform: scale(0.7);
     -o-transform: scale(0.7);
     background: blue;
  }
  ul.small-zoom li a:before {
      zoom: 0.7;
      background: green;
  } 
  </code></pre>
  
  <p>As you can see in <a href="http://jsfiddle.net/Shyghar/y2cy7xy5/7/" rel="nofollow noreferrer">this jsfiddle</a> I tryed multiple solutions but I need the list item change width and heigth based on the a:before element and, with the scale() instruction the li dimention do not change.  </p>
  
  <p><img src="https://i.stack.imgur.com/sHV3z.jpg" alt="enter image description here">  </p>
  
  <p>There is a solution to have this in Firefow whitout fix the li dimentions?  </p>