Question

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

可视化：

enter image description here

代码：jsfiddle

Answer 1

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

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>

CSS（font-size？） - Chrome缩小了vs Firefox

2 个答案: