CSS（字体大小？） - Chrome 与 Firefox 缩小答案

【问题标题】：CSS (font-size?) - Chrome vs Firefox on zooming outCSS（字体大小？） - Chrome 与 Firefox 缩小
【发布时间】：2014-03-04 04:55:25
【问题描述】：

Firefox 和 Chrome 似乎使用不同的字体大小显示。

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

可视化：

代码：jsfiddle

【问题讨论】：

请将您的代码与问题一起放入 JSFiddle jsfiddle.net/64H63。如果不查看代码，这几乎是不可能解决的。
jsfiddle.net/rokas/U6Khy
在两种浏览器（chrome 版本）上对我来说完全一样。尝试检查两个浏览器上的开发者工具。
在我看来也一模一样，也许你不小心手动更改了chrome中所有文本的字体大小。
在 chrome 缩小到 33% 之前，它看起来对我来说也不错。（顺便说一下，我使用的是 1920x1080）。 chrome 字体设置是默认设置。我打扰了，因为我希望网站在“恶劣”条件下看起来不错。谢谢你的回答:)

标签： css google-chrome firefox font-size mozilla

【解决方案1】：

这与您的代码无关。您在 chrome 中看到的最大缩小只是最小的 chrome 字体大小。您可以通过 explained here 的方式进行设置。但是，您不能低于在您的情况下可以看到的某个值。而你对此无能为力。它被认为是 chrome 错误：http://code.google.com/p/chromium/issues/detail?id=7417 并且似乎有一些解决方法，但它不会修复默认的 chrome 行为（您必须调整您正在查看页面的每个 chrome 浏览器）。你为什么还要关心？

【讨论】：

【解决方案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>

【讨论】：