Bigger on firefox than on Chrome

Question

I am developing a website and I am doing my best to make look the same on all browsers. I started developing the website on Chrome. I then tried it on Firefox and noticed how the website (images, text, etc) look much bigger on firefox then on Chrome. The same applies for IE.
To make Chrome show the website like Firefox I need to go to the Chrome and set Zoom to 120%.
To make Firefox show the website like Chrome I need to go to Firefox and set Zoom out (on Firefox I never get same view as on Chrome however, div's width does not seem to change).
I was wondering if anyone has seen this issue? From where it is coming? and if there is a way how I can fix zoom at 100% on all browsers (from CSS?) so that someone would not need to change his browser settings so to see the website the same on all browsers.

Answer 1

You can set the <b>layout.css.devPixelsPerPx</b> pref on the <b>about:config</b> page to 1.0
You can adjust layout.css.devPixelsPerPx starting from 1.0 in 0.1 or 0.05 steps to make icons show correctly.
You can open the <b>about:config</b> page via the location/address bar.
You can accept the warning and click "I'll be careful" to continue.
*http://kb.mozillazine.org/about:config
Use an extension to adjust the text size in the user interface and the page zoom in the browser window.
You can look at this extension to adjust the font size for the user interface.
*Theme Font & Size Changer: https://addons.mozilla.org/firefox/addon/theme-font-size-changer/
You can look at the Default FullZoom Level or NoScript extension if web pages need to be adjusted after changing layout.css.devPixelsPerPx.
*Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
*NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/