Inline-block-und line-height-rendering anders auf Chrome, Safari und Firefox

Ich Stil code - tags wie folgt:

 code {
   display: inline-block;
   white-space: no-wrap;
   background: #fff;
   font-size: .8em;
   line-height: 1.5em;
   color: #555;
   border: 1px solid #ddd;
   -webkit-border-radius: 0.4em;
   -moz-border-radius: 0.4em;
   -ms-border-radius: 0.4em;
   -o-border-radius: 0.4em;
   border-radius: 0.4em;
   padding: 0 .3em;
   margin: -1px 0;
   overflow: hidden;
   background-clip: padding-box;
   -webkit-background-clip: padding-box;
 }

und hier ist, wie es rendert auf

  • Safari (richtig)
    Inline-block-und line-height-rendering anders auf Chrome, Safari und Firefox
  • Chrom (falsch ausgerichtet)
    Inline-block-und line-height-rendering anders auf Chrome, Safari und Firefox
  • Firefox (falsch ausgerichtet)
    Inline-block-und line-height-rendering anders auf Chrome, Safari und Firefox

Seltsam finde ich vor allem, dass Chrome und Safari gerendert. Was kann getan werden, hier bringen die vertikale Ausrichtung wieder auf die gleiche Grundlinie wie der normale text?

Haben Sie versucht vertical-align:middle?
Ja. Wenn ich dies mache, Chrome und Firefox funktioniert, aber Safari macht zu niedrig gezielt: cloud.coneybeare.net/S9LQ

InformationsquelleAutor coneybeare | 2013-10-25

  1. 3

    können Sie auch vertical-align: middle; statt line-height.

    Wenn ich dies mache, Chrome und Firefox funktioniert, aber Safari macht zu niedrig gezielt: cloud.coneybeare.net/S9LQ
    versuchen Sie es mit display table-cell statt inline-block;
    Tabelle-Zelle erzwingt eine neue Zeile
    hier ein live-Beispiel: matt.coneybeare.mir/...
    Während es das problem nicht beheben konnte, machte es besser als der etwas niedrigere Safari machen ist besser und wirkt weniger Zuschauer als die Chrom massive Ausrichtung fehlschlagen

    InformationsquelleAutor Bhojendra Rauniyar

  2. 2

    Vielleicht nicht das gleiche Problem, aber ich habe vor kurzem festgestellt, dass auf display: inline-block - Elemente mit line-height Ursachen Safari und Chrome zu richten, die Dinge anders.
    In meiner situation hinzufügen vertical-align: middle bewirkt, dass Sie zumindest die Dinge ausrichten die gleiche Weise, die es mir erlaubt mit line-height zu setzen, die Dinge richtig.

    InformationsquelleAutor Derek Lucas

Schreibe einen Kommentar