title: Hack css font-size for Chrome and Firefox
body: <p>I know that each browser has default css.</p>
  
  <p>I have an header of my site and I want to define different font-size in each browser.</p>
  
  <p>so I have this style: </p>
  
  <pre><code>.FontSize { 14px; }
  </code></pre>
  
  <p>and this element: </p>
  
  <pre><code>&lt;span class="FontSize"&gt;text&lt;/span&gt;
  </code></pre>
  
  <p>For Chrome I want to set:</p>
  
  <pre><code>font-size: 12px;
  </code></pre>
  
  <p>For firefox I want to set:</p>
  
  <pre><code>font-size: 12px;
  </code></pre>
  
  <p>I read that I hack the css, so this is my css file:</p>
  
  <p>CSS FILE:</p>
  
  <pre><code>.FontSize { 14px; }
  
  /* Chrome */
  @media screen and (-webkit-min-device-pixel-ratio:0) {
      .FontSize {font-size:12px;}
  }
  
  /* Firefox */
  @-moz-document url-prefix() { 
    .FontSize {
       font-size:12px;
    }
  }
  </code></pre>
  
  <p>but it doesn't change the font-size in these browsers (Chrome and Firefox)..</p>
  
  <p>Any help appreciated!</p>