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:

enter image description here

code: jsfiddle

Please put your code in a JSFiddle http://jsfiddle.net/64H63/ along with in the question. This is close to impossible to solve without viewing the code. — Anonymous, Feb 06 '14 at 23:52
It appears exactly the same to me on both browsers (_the **chrome** version_). Try checking the developer tools on both browsers. — Anonymous, Feb 07 '14 at 00:20
It looks exactly the same to me as well, perhaps you manually changed the font size for all text in chrome by accident. — Alexander Lozada, Feb 07 '14 at 00:23
well it looks good for me too until chrome zooms-out to 33%. (i'm using 1920x1080 by the way). chrome font settings are default. i bother, because I want the site look good on 'harsh' conditions. thank You for answers :) — user3272725, Feb 07 '14 at 00:51

LorDex · Accepted Answer · 2014-02-07T00:57:03.013

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?

score 1 · Answer 2 · answered May 06 '15 at 19:28

<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>

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

2 Answers2