title: Chrome and Firefox Browser Default Zoom
body: <p>I have a problem with <a href="http://www.webotronica.com" rel="nofollow noreferrer">this page</a>. I developed it in Firefox on it's default zoom level. The idiot that I am, I haven't tested it on Chrome. So, now I see that the page's layout and/or font size is different on Chrome and other Webkit based browsers. Default Chrome zoom level is 75% so everything is smaller on Chrome. I have to say that I've made a dozen of web apps but have concentrated on the backend side of the application and never put many thoughts in how the page looks like on different browsers.</p>
  
  <p>I mean, I have if javascript cross browser stuff had to be addressed but this is something that I never came across. </p>
  
  <p>What I think is wrong with this is font size. I have a <code>#main-wrap</code> that wraps the entire app and has a base font size of <code>16px</code>. So, <code>#navigation a</code> has <code>0.7em</code> because that way it looks normal in Firefox, but looks really small in Chrome. </p>
  
  <p>Could anyone post some tips or hints as to way this is happening?</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>I've fixed the problem with</p>
  
  <pre><code>zoom: 1.29;
  -moz-transform: scale(1);
  -moz-transform-origin: 0 0;
  </code></pre>
  
  <p>And it works but, as I know, it's a good to do this like this. Is there a CSS technique do make pages look the same across browsers?</p>