Inline-block et la hauteur de la ligne de rendu différemment sur Chrome, Safari et Firefox

J'style code balises comme suit:

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

et voici comment il rend sur

  • Safari (correct)
    Inline-block et la hauteur de la ligne de rendu différemment sur Chrome, Safari et Firefox
  • Chrome (incorrectement aligné)
    Inline-block et la hauteur de la ligne de rendu différemment sur Chrome, Safari et Firefox
  • Firefox (incorrectement aligné)
    Inline-block et la hauteur de la ligne de rendu différemment sur Chrome, Safari et Firefox

Je trouve ça étrange, surtout que Chrome et Safari sont rendu différemment. Ce qui peut être fait ici pour mettre de l'alignement vertical de retour à la même ligne de base que le texte normal?

  • Avez-vous essayé vertical-align:middle?
  • Oui. Quand je fais cela, google Chrome et Firefox de travail, mais Safari est trop faible: cloud.coneybeare.net/S9LQ
InformationsquelleAutor coneybeare | 2013-10-25
  1. 3

    vous pouvez également utiliser vertical-align: middle; au lieu de la hauteur de la ligne.

    • Quand je fais cela, google Chrome et Firefox de travail, mais Safari est trop faible: cloud.coneybeare.net/S9LQ
    • essayez d'utiliser l'affichage de la table-cell au lieu de inline-block;
    • table-cell forces une nouvelle ligne
    • ici est un exemple: matt.coneybeare.moi/...
    • Alors qu'il n'a pas de résoudre le problème, il fait mieux que la légère baisse Safari rendu est meilleur et affecte moins de téléspectateurs que le chrome massif de l'alignement échoue
    InformationsquelleAutor Bhojendra Rauniyar
  2. 2

    Peut-être pas le même problème, mais j'ai récemment trouvé que sur display: inline-block éléments, à l'aide de line-height causes Safari et Chrome pour aligner les choses différemment.
    Dans ma situation, ajoutant vertical-align: middle provoque au moins aligner les choses de la même façon, ce qui me permet d'utiliser la ligne de hauteur à la position choses correctement.

    InformationsquelleAutor Derek Lucas