web-dev-qa-db-fra.com

Le texte n'est pas placé de la même manière dans Safari que dans les autres navigateurs.

Le texte n'est pas placé de la même manière dans Safari que dans les autres navigateurs. Y a-t-il une raison à cela? Existe-t-il un style garantissant des mesures précises? 

* {
  margin: 0;
  padding: 0;
}
#btn_signup {
  opacity: 1;
  position: absolute;
  width: 185px;
  height: 50px;
  left: 10px;
  top: 10px;
  overflow: visible;
}
#Rectangle_1 {
  opacity: 1;
  fill: transparent;
  stroke: rgb(67, 66, 93);
  stroke-width: 1px;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 4;
  shape-rendering: auto;
}
.Rectangle_1 {
  position: absolute;
  overflow: visible;
  width: 185px;
  height: 50px;
  left: 0px;
  top: 0px;
}
#Sign_up {
  opacity: 1;
  position: absolute;
  left: 58px;
  top: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: visible;
  width: 63px;
  white-space: nowrap;
  text-align: center;
}
#Path_1 {
  opacity: 1;
  fill: rgba(0,0,0,0);
  stroke: rgb(112, 112, 112);
  stroke-width: 0.5px;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 4;
  shape-rendering: auto;
}
.Path_1 {
  overflow: visible;
  position: absolute;
  top: 16.5px;
  left: 1px;
  width: 183.5px;
  height: 0.5px;
  transform: matrix(1,0,0,1,0,0);
}
<div id="A5">
  <div id="btn_signup">
    <svg class="Rectangle_1">
      <rect id="Rectangle_1" rx="4" ry="4" x="0" y="0" width="185" height="50"></rect>
    </svg>
    <div id="Sign_up">
      <span style="font-family:Helvetica;font-style:normal;font-weight:normal;font-size:18px;color:rgba(77,79,92,1);display:inherit;">Sign up</span>
    </div>
    <svg viewBox="12.5 0 183.5 0.5" class="Path_1">
      <path id="Path_1" d="M 12.5 0 L 196 0"></path>
    </svg>
  </div>
</div>

Dans Firefox, le texte est aligné sur la ligne. Dans Safari, il existe un écart de quelques pixels, comme indiqué ci-dessous: 

 enter image description here

Comment puis-je supprimer cet écart? 

_ {Ajout d'une prime. Posez des questions si vous avez besoin de plus de clarté.} _ 

Mettre à jour:
Merci pour toutes les suggestions de centrage vertical. La moitié des cas que j'ai ont été fixés par centrage vertical, mais le reste sont des cas d'alignement supérieur. 

Il semble que ce que je veux, c’est que le contenu de mon texte, la zone de contour du contenu à la hauteur des majuscules, soit aligné sur le bord supérieur de la ligne de texte, comme indiqué dans l’image. 

Ressources:
On dirait que c'est un problème commun sur toutes les plateformes.
Les mesures de hauteur de bouchon et de hauteur x sont inexactes
Métriques verticales

htmlcsssafariwebkittypography
8
1.21 gigawatts

Voir la question et la réponse: WebKit vs Mozilla alignement vertical des glyphes de police dans la boîte

CSS vous permet de jouer avec la position des éléments de texte, mais le positionnement de la lettre par rapport à l'élément dépend de la police et du navigateur. Vous ne pouvez pas modifier cela directement, ce qui signifie qu'en théorie vous ne pouvez pas vraiment être certain de la position réelle des lettres elles-mêmes.

CSS vous donne un accès indirect. Par exemple, avec vertical-align, vous pouvez aligner le texte sur le texte parent. Donc, en fonction de la valeur, les éléments se positionneront par rapport aux lettres réelles. Par exemple:

div {
  font-size: 20px;
  line-height: 1.2;
  border-top: solid lightgray 1px;
  font-family: arial;
}

div span {
  display: inline-block;
  background-color: lightblue;
  border-top: solid red 1px;
}

.topalign span {
  vertical-align: top;
}

.bottomalign span {
  vertical-align: bottom;
}
<div class="topalign">
  <span style="font-family: 'helvetica neue'; ">Helvetica N</span>
  <span style="font-family: 'arial'; font-size: 30px">Arial</span>
  <span style="font-family: 'Times new roman';  ">Times NR</span>
  <span style="font-family: 'Tahoma'; font-size: 15px;">Tahoma</span>
</div>
<div class="bottomalign">
  <span style="font-family: 'helvetica neue'; ">Helvetica N</span>
  <span style="font-family: 'arial'; font-size: 30px">Arial</span>
  <span style="font-family: 'Times new roman';  ">Times NR</span>
  <span style="font-family: 'Tahoma'; font-size: 15px;">Tahoma</span>
</div>

Vous pouvez également jouer avec line-height, ce qui modifiera la hauteur de l'élément de texte sans changer la taille de la police, ce qui signifie que vous pourrez plus ou moins contrôler l'emplacement de la lettre. Mais encore une fois, les polices/navigateurs différents seront rendus différemment. Vous ne positionnez toujours pas les lettres avec précision. Par exemple:

div {
  font-size: 30px;
  line-height: 1.2;
  border-top: solid lightgray 1px;
  font-family: arial;
}

div span {
  display: inline-block;
  background-color: lightblue;
  border-top: solid red 1px;
}

.topalign span {
  vertical-align: top;
}
<div class="topalign">
  <span style="font-family: 'helvetica neue'; ">Helvetica N</span>
  <span style="font-family: 'arial'; line-height: 1.5;">Arial</span>
  <span style="font-family: 'Times new roman';  line-height: 0.5;">Times NR</span>
  <span style="font-family: 'Tahoma'; ">Tahoma</span>
</div>

Donc, en théorie, vous ne pouvez pas définir précisément les positions des lettres réelles exactement où vous le souhaitez. Cela ne peut pas être explicite et peut donc entraîner des incohérences dans le navigateur.

Cela dit, le cas que vous signalez semble être un bogue de Firefox avec la police Helvetica. Le positionnement des lettres d'Helvetica ne correspond pas à celui des autres polices ou des autres navigateurs. C'est particulièrement évident lorsque vous comparez à Helvetica Neue ou Arial, ce qui devrait être plus ou moins le même. Voir:

div {
  font-size: 30px;
  line-height: 1.2;
  border-top: solid lightgray 1px;
  font-family: arial;
}

div span {
  display: inline-block;
  background-color: lightblue;
  border-top: solid red 1px;
}

.topalign span {
  vertical-align: top;
}
<div class="topalign">
  <span style="font-family: 'helvetica';  ">Helvetica </span>
  <span style="font-family: 'helvetica neue'; ">Helvetica N</span>
  <span style="font-family: 'arial'; ">Arial</span>
</div>

Même si vous ne pouvez pas énoncer explicitement le positionnement des lettres, vous pouvez néanmoins vous attendre à un certain niveau de cohérence. Normalement, il existe un rembourrage normal et cohérent qui est plus ou moins égal en haut et en bas. Cela peut varier d’une police à l’autre et d’un navigateur à l’autre, mais la façon dont helvetica est restitué dans Firefox me semble un bug (pour moi au moins, il ya peut-être une raison, mais je ne vois pas pourquoi). 

Donc, si vous pouvez remplacer Helvetica par Helvetica Neue, vous pouvez jouer avec line-height pour positionner la lettre par rapport à l'élément et obtenir ce que vous voulez. Par exemple, normalement, une hauteur de ligne d'environ 0,75 arrivera au même niveau que les lettres majuscules en haut et en bas, ce qui signifie qu'en positionnant l'élément, vous pouvez positionner la lettre. Comme ceci par exemple: 

* {
  margin: 0;
  padding: 0;
}
#btn_signup {
  opacity: 1;
  position: absolute;
  width: 185px;
  height: 50px;
  left: 10px;
  top: 10px;
  overflow: visible;
}
#Rectangle_1 {
  opacity: 1;
  fill: transparent;
  stroke: rgb(67, 66, 93);
  stroke-width: 1px;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 4;
  shape-rendering: auto;
}
.Rectangle_1 {
  position: absolute;
  overflow: visible;
  width: 185px;
  height: 50px;
  left: 0px;
  top: 0px;
}
#Sign_up {
  opacity: 1;
  position: absolute;
  left: 58px;
  top: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: visible;
  width: 63px;
  white-space: nowrap;
  text-align: center;
}
#Path_1 {
  opacity: 1;
  fill: rgba(0,0,0,0);
  stroke: rgb(112, 112, 112);
  stroke-width: 0.5px;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 4;
  shape-rendering: auto;
}
.Path_1 {
  overflow: visible;
  position: absolute;
  top: 16.5px;
  left: 1px;
  width: 183.5px;
  height: 0.5px;
  transform: matrix(1,0,0,1,0,0);
}
<div id="A5">
  <div id="btn_signup">
    <svg class="Rectangle_1">
      <rect id="Rectangle_1" rx="4" ry="4" x="0" y="0" width="185" height="50"></rect>
    </svg>
    <div id="Sign_up">
      <span style="font-family:Helvetica neue;font-style:normal;font-weight:normal;font-size:18px;color:rgba(77,79,92,1);display:inherit;line-height: 0.75;">Sign up</span>
    </div>
    <svg viewBox="12.5 0 183.5 0.5" class="Path_1">
      <path id="Path_1" d="M 12.5 0 L 196 0"></path>
    </svg>
  </div>
</div>

3
Julien Grégoire

Différents navigateurs gèrent le positionnement décimal différemment. La gestion des pixels fractionnaires ne fait pas partie des spécifications CSS. Par conséquent, même si tout est correctement positionné à présent, cela pourrait se rompre après une mise à jour du navigateur. Si vous supprimez toutes les valeurs de pixel fractionnaires et ajoutez line-height:1, cela devrait fonctionner.

Si cela ne fonctionne pas, essayez ceci et laissez-moi savoir ce que vous voyez (je n'utilise ni Safari ni FF). Inspectez la span dans chaque navigateur et l'outil doit mettre en évidence un rectangle. Vérifiez que le haut du rectangle ne touche pas la ligne ou que le haut du texte ne touche pas le haut du rectangle. Dans Chrome, le haut du texte ne touche pas le haut du rectangle. La solution est donc line-height:1.

2
Leo Jiang

Les polices sont rendues différemment sur différents navigateurs. Voici une capture de la même ligne de texte. Il a été capturé sur tous les principaux navigateurs et mis l'un sur l'autre pour illustrer l'ampleur du problème. (Tiré de cet article )

 enter image description here

Des polices différentes donneront des résultats différents

Lorsque j'avais besoin que le texte soit aligné verticalement, pixel parfait, nous avons eu une équipe qui a effectué des recherches. Nous avons constaté que certaines polices étaient mieux alignées verticalement que d'autres - il convient donc de les tester.

Vous pouvez toujours le pirater avec JS

Si c'est un safari - changez la hauteur de la ligne (ou la marge ou autre chose)

if (navigator.userAgent.toLowerCase().indexOf('safari') > -1) {
  $('.your-element').css({lineHeight: "21px"});
}
1
Adam Genshaft

Conservez position: relative; pour #btn_signup. Centrez également le Sign_up en utilisant le CSS suivant

#Sign_up {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Cela fonctionnera de la même manière dans tous les navigateurs.

* {
  margin: 0;
  padding: 0;
}

#btn_signup {
  opacity: 1;
  position: relative;
  width: 185px;
  height: 50px;
  left: 10px;
  top: 10px;
  overflow: visible;
}

#Rectangle_1 {
  opacity: 1;
  fill: transparent;
  stroke: rgb(67, 66, 93);
  stroke-width: 1px;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 4;
  shape-rendering: auto;
}

.Rectangle_1 {
  position: absolute;
  overflow: visible;
  width: 185px;
  height: 50px;
  left: 0px;
  top: 0px;
}

#Sign_up {
  opacity: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: visible;
  width: 63px;
  white-space: nowrap;
  text-align: center;
}

#Path_1 {
  opacity: 1;
  fill: rgba(0, 0, 0, 0);
  stroke: rgb(112, 112, 112);
  stroke-width: 0.5px;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  stroke-miterlimit: 4;
  shape-rendering: auto;
}

.Path_1 {
  overflow: visible;
  position: absolute;
  top: 16.5px;
  left: 1px;
  width: 183.5px;
  height: 0.5px;
  transform: matrix(1, 0, 0, 1, 0, 0);
}
<div id="A5">
  <div id="btn_signup">
    <svg class="Rectangle_1">
      <rect id="Rectangle_1" rx="4" ry="4" x="0" y="0" width="185" height="50"></rect>
    </svg>
    <div id="Sign_up">
      <span style="font-family:Helvetica;font-style:normal;font-weight:normal;font-size:18px;color:rgba(77,79,92,1);display:inherit;">Sign up</span>
    </div>
    <svg viewBox="12.5 0 183.5 0.5" class="Path_1">
      <path id="Path_1" d="M 12.5 0 L 196 0"></path>
    </svg>
  </div>
</div>

1
Nandita Sharma

Veuillez remplacer ce code en CSS:

#Sign_up {
    opacity: 1;
    box-sizing: border-box;
    overflow: visible;
    white-space: nowrap;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: block;
}
0
Tushar Kumawat