2014-02-06 6 views
0

Возможно, Firefox и Chrome появляются с разными размерами шрифтов.CSS (размер шрифта?) - Chrome vs Firefox при масштабировании

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

+2

Пожалуйста, разместите свой код в JSFiddle http://jsfiddle.net/64H63/ вместе с вопросом. Это почти невозможно решить без просмотра кода. – Anonymous

+0

http://jsfiddle.net/rokas/U6Khy/ – user3272725

+1

В обоих браузерах мне кажется совершенно одинаковым (_the ** chrome ** version_). Попробуйте проверить инструменты разработчика на обоих браузерах. – Anonymous

ответ

1

Это не имеет никакого отношения к вашему коду. То, что вы видите при максимальном уменьшении в хроме, - это минимальный размер шрифта хрома. Вы можете настроить его таким образом: explained here. Однако вы не можете пойти ниже определенного значения, которое вы можете увидеть в своем случае. И вы ничего не можете с этим поделать. Это считается ошибкой хром: http://code.google.com/p/chromium/issues/detail?id=7417, и, похоже, у него есть обходное решение, но оно не будет исправлять по умолчанию поведение chrome (вам нужно будет настроить каждый хромированный браузер, который вы просматриваете на странице). Зачем вам все равно?

1
<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> 
Смежные вопросы