jsfiddle результат другой при просмотре кадра только?

Итак, у меня есть этот дизайн в jsfiddle.jsfiddle результат другой при просмотре кадра только?

Это выглядит действительно красиво в сафари и хроме. Тем не менее, с firefox, обычная страница выглядит красиво, но когда я просматриваю кадр отдельно, шрифт линии-высота, кажется, перепутался. Результат на моем веб-сайте выглядит как «только рамка».

Может ли кто-нибудь взглянуть на него и посмотреть, смогут ли они объяснить, почему это происходит?

Обратите внимание на g.

looks good (jsfiddle)

enter image description here

line-height messed up (jsfiddle result frame only)

enter image description here

HTML

<div id="formPage"> 
    <div id="formBox"> 
     <div class="formSection" style="border:1px solid black;"> 
      <div class="formLine" style="height:49px;position:relative;"> 
      <div class="indent">This is a needed label that I put over the textarea that describes what people are filling out.</div> 
      <div class="whiteIndent"></div> 
      <div class="borderIndent"></div> 
      <div class="whiteIndent2"></div> 
      <div class="borderIndent2"></div> 
      <textarea name="text1" class="indent" rows="3" maxlength="360"></textarea> 
     </div> 
    </div> 
</div>

CSS

* { } 
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 

#formPage { 
    font-family: 'Arial Narrow', Arial, sans-serif;font-size:13px; 
    background:#fff; 
    border: 1px solid #d8d8d8; 
    border-bottom-width: 2px; 
    border-top-width: 0; 
    width:910px; 
    margin:0 auto; 
    padding:30px; 
    height:100px; 
} 

.formLine > textarea.indent { 
    position:absolute; 
    font-family: 'Arial Narrow', Arial, sans-serif; 
    font-size:13px; 
    background-color:#E2F4FE; 
    width:818px; 
    z-index:0; 
    top:0px; 
    padding: 0; 
    outline: 0; 
    border:0; 
    resize:none; 
    overflow:hidden; 
    box-sizing: border-box; 
    } 
    .formLine > div.indent { position:absolute;z-index:2;top:0;background-color:#fff;padding:2px 2px 2px 1px; } 
    .formLine > div.whiteIndent { position:absolute;z-index:2;top:16px;width:820px;height:3px;background-color:#fff; } 
    .formLine > div.borderIndent { position:absolute;z-index:2;top:17px;left:0;border-top:1px solid #000;width:823px;height:1px; } 
    .formLine > div.whiteIndent2 { position:absolute;z-index:2;top:32px;width:820px;height:3px;background-color:#fff; } 
    .formLine > div.borderIndent2 { position:absolute;z-index:2;top:33px;left:0;border-top:1px solid #000;width:823px;height:1px; } 

    .formSection { float:left;width:825px;border-right:2px solid #000;border-bottom:1px solid #000;font-size:13px;}

источник

2013-11-09 bryan

Два изображения кажутся мне идентичными. Можете ли вы, пожалуйста, показать, где проблема (или не делайте этого, если это моя проблема, и все это понимают). – dbanet

@dbanet посмотреть на g. На втором изображении они обрезаются внизу, а в первом они находятся в центре синего. – bryan

Я действительно не могу воспроизвести это в своей системе: http://i.imgur.com/CBOAx3s.png – dbanet

Это проблема шрифта. Должен использовать более удобный для браузера шрифт. Браузеры отображают шрифт по-разному, и не все может быть точным при использовании определенных шрифтов, таких как Arial Narrow

источник

2014-02-14 18:31:07 bryan

jsfiddle результат другой при просмотре кадра только?

ответ

Смежные вопросы