ein kleiner Unterschied der Schriftart Rendering in Firefox und Chrom

Question

Ich habe ein seltsames Problem mit der Schrift Rendering in Firefox und Chrome. In Chrome scheint die Schrift etwas groß zu sein (nicht so offensichtlich). Deshalb kommt es in einer anderen Zeile. Die Screenshots sind unten angehängt (Das erste Bild ist Chrom, das zweite ist Firefox).

Ich benutze bootstrap 3.3.6, font-awesome 4.6.1, jquery-1.11.2.min.js und prettyphoto auf der Seite.

Ich bin mit font-size: 16px (Auch ich versuchte 1em), font-weight: 400, Text-Rendering: optimizeLegibility, line-height: 1,6 für den 'p' Tag

und font- Familie: Arial, Helvetica, Sans-Serif und Font-Stil: normal geerbt von der "Körper"

die 3 Spalten sind col-md-4 Bootstrap, und das Layout in Firebug und Entwickler-Toolbar zeigt, es hat eine Breite von 310px, die (mit 15px Padding) sein sollte.

CSS ist wie dieser

body{ color:#333;cursor:default;font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:400;line-height:22px;position:relative;margin:0; background:#153b5d url(../img/bg.png) repeat-x;} 

p{font-family:inherit;font-size:1em;font-weight:400;line-height:1.6;text-rendering:optimizelegibility;} 

Kann mir jemand bitte sagen, was ich falsch mache. Vielen Dank.

Edit: Ich versuche, dies als ein Snippet zu setzen.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<style> 
 
    *, 
 
    a:hover, 
 
    a:active, 
 
    a:focus { 
 
    outline: 0; 
 
    } 
 
    body { 
 
    color: #333; 
 
    cursor: default; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    line-height: 22px; 
 
    position: relative; 
 
    margin: 0; 
 
    background: #153b5d url(../img/bg.png) repeat-x; 
 
    font-size: 16px; 
 
    } 
 
    p {} .container { 
 
    background: #FFF; 
 
    max-width: 1020px; 
 
    } 
 
</style> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <p>For a long lasting freshness feeling; Removes stubborn odour from textiles.</p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <p>Unpretty deo and sweat stains on your shirt? 
 
     <br>Now Dr. Beckmann stain spray deo &amp; sweat provides a way out.</p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <p>Every stain is different; For each stain the perfect specialist.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Ich fühle, dass es keinen Nutzen gibt, um dies zu sortieren. Ein einfacher Stift bei http://codepen.io/anon/pen/dXdwmQ zeigt, dass die Schriftarten unterschiedlich wiedergegeben werden. Sogar mit reset.css. Ich checke Windows 7 ein. Ich denke, Mac rendert es richtig.

<link href="httpshttps://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" /> 
<style> 
    body { 
    color: #333; 
    font-family: Arial, Helvetica, sans-serif; 
    background:#fff; 
    font-size: 16px; 
    } 
</style> 

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 

Gut zu wissen, zumindest jetzt. Lektion gelernt :)

Answer 2

Standardschriftart in dem BODY-Element ein. P erbt standardmäßig die Schriftarteinstellungen.

Verwenden Sie eine normalize.css? Wenn Sie nicht darauf achten, einen in Ihr Projekt aufzunehmen. Jeder Browser hat leicht unterschiedliche Basis-CSS-Werte. Normalize legt Basis-CSS-Werte fest, sodass sie in allen Browsern ähnlich sind.

Ich würde so etwas wie dies versucht:

body { 
    color:#333; 
    cursor:default; 
    font-family:Arial,Helvetica,sans-serif; 
    font-style:normal; 
    font-weight:400; 
    font-size: 16px; 
    position:relative; 
    margin:0; 
    background:#153b5d url(../img/bg.png) repeat-x; 
    text-rendering:optimizelegibility; 
} 

p { 

} 

Answer 3

Zugegeben als eine Antwort, da ich nicht kommentieren kann - aber haben Sie überprüft, beide Browser auf der gleiche ‚Zoomstufe‘ ist (cmd + 0 auf dem Mac) ?