CSS (font-size?) - Chrome vs Firefox on zooming out

Question

Firefox and Chrome seem to appear with different font-sizes.

html:

<div id="gallery-section" class="section">
    <div id="gallery-section-inner" class="inner">
        <div class='gallery-post'>
            <div class="thumbnail"></div>
            <div class='gallery-excerpt'><p>This is some random text witch shows in photo description. text witch shows in photo description.</p>    </div>
        </div>
    </div>
</div>

CSS:

.gallery-post {
    width:170px;
    background-color:white;
    float:left;
    font-family:'Open Sans';
    margin-left:1.5em;
    border:1px solid #e0e0e0;
}

.gallery-excerpt {
    text-align:left;
    float:left;
    background-color:#EDEDED;
    width:150px;
    min-height:100px;
    border:1px solid #e0e0e0;
    font-size:12px;
    border-top:none;
    color:#535353;
    -moz-box-sizing: border-box;
    -webkit-box-sizing:border-box;
    box-sizing: border-box;
    margin-left:10px ;
    margin-bottom:10px;
    padding:1em 1em 0em 1em;
}

.thumbnail {
    width:150px;
    height:170px;
    border:1px solid #e0e0e0;
    margin-left: auto ;
    margin-right: auto ;
    margin-top:10px;
}

Visualization:

code: jsfiddle

Answer 1

It has nothing to do with your code. What you see on maximum zoom-out in chrome is just minimum chrome font size. You can set it up in a way explained here . However you can't go below certain value which you can see in your case. And you can't do anything about it. It's considered as a chrome bug: http://code.google.com/p/chromium/issues/detail?id=7417 and there seems to be some workaround, but it will not fix the default chrome behaviour (you'd have to tweak each chrome browser you're viewing the page on). Why do you even care anyway?

Answer 2

<script>

     if(navigator.userAgent.indexOf("Chrome") != -1 ) 
    {
         var fontsize = "<style>body{font-size: 125%;}</style>";
    }
    else if(navigator.userAgent.indexOf("Opera") != -1 )
    {
         var fontsize = "<style>body{font-size: 100%;}</style>";
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         var fontsize = "<style>body{font-size: 100%;}</style>";
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
         var fontsize = "<style>body {font-size: 100%;}</style>";
    }  
    else 
    {
         var fontsize = "<style>body {font-size: 100%;}</style>";
    }
    </script>

<script>document.writeln(fontsize);</script>