it-swarm.com.de

Text wird in Safari nicht so positioniert wie in anderen Browsern

Der Text wird in Safari nicht so positioniert wie in anderen Browsern. Gibt es einen Grund dafür? Gibt es einen Stil, der sicherstellt, dass er präzise Maße erfüllt 

* {
  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>

In Firefox ist der Text bündig. In Safari gibt es einige Lücken, wie unten gezeigt: 

 enter image description here

Wie entferne ich diese Lücke? 

Kopfgeld hinzugefügt. Stellen Sie Fragen, wenn Sie mehr Klarheit benötigen. 

Update:
Vielen Dank für alle vertikalen Zentrierungsempfehlungen. Die Hälfte der Fälle, die ich habe, würde durch vertikale Zentrierung fixiert werden, der Rest ist jedoch ein Top-Ausrichtungsfall. 

Anscheinend möchte ich meinen Textinhalt haben. Der Begrenzungsrahmen des Inhalts wird in der Höhe der Großbuchstaben an der oberen Kante der Textzeile ausgerichtet, wie im Bild zu sehen ist. 

Ressourcen:
Es sieht so aus, als ob es ein plattformübergreifendes Problem ist.
Kappenhöhe und X-Höhe Metriken sind ungenau
Vertikale Metriken

8
1.21 gigawatts

Siehe diese Frage und Antwort: WebKit vs. Mozilla vertikale Ausrichtung von Schriftzeichen in Kästchen

Grundsätzlich können Sie mit CSS mit der Position der Textelemente spielen, aber die tatsächliche Buchstabenpositionierung gegenüber dem Element hängt von der Schriftart und vom Browser ab. Sie können dies nicht direkt ändern, was bedeutet, dass Sie theoretisch nicht wirklich über die tatsächliche Position der Buchstaben selbst Bescheid wissen können.

CSS bietet Ihnen indirekten Zugriff, zum Beispiel mit vertical-align können Sie den Text am übergeordneten Text ausrichten. Abhängig vom Wert werden die Elemente in Bezug auf die tatsächlichen Buchstaben positioniert. Zum Beispiel:

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>

Sie können auch mit Zeilenhöhe spielen, wodurch die Höhe des Textelements geändert wird, ohne die Schriftgröße zu ändern. Sie können also mehr oder weniger steuern, wo der Buchstabe platziert werden soll. Aber auch hier werden unterschiedliche Schriftarten/Browser anders dargestellt. Sie positionieren die Buchstaben immer noch nicht genau. Zum Beispiel:

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>

Theoretisch können Sie die tatsächlichen Buchstabenpositionen also nicht genau definieren, wo Sie möchten. Es kann nicht explizit sein und kann daher zu Inkonsistenzen zwischen Browsern führen.

Der Fall, auf den Sie hinweisen, scheint jedoch ein Firefox-Fehler mit der Helvetica-Schriftart zu sein. Die Buchstabenposition von Helvetica stimmt nicht mit anderen Schriftarten oder Browsern überein. Es ist besonders offensichtlich, wenn Sie mit Helvetica Neue oder Arial vergleichen, was mehr oder weniger gleich sein sollte. Sehen:

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>

Auch wenn Sie die Buchstabenpositionierung nicht explizit angeben können, können Sie dennoch eine gewisse Konsistenz erwarten. Normalerweise gibt es eine normale und kohärente Polsterung, die oben und unten mehr oder weniger gleich ist. Es kann von Font zu Font und von Browser zu Browser unterschiedlich sein, aber die Art und Weise, wie Helvetica in Firefox gerendert wird, scheint auf jeden Fall ein Fehler zu sein (zumindest für mich gibt es vielleicht einen Grund, aber ich sehe nicht, warum). 

Wenn Sie also Helvetica durch Helvetica Neue ersetzen können, können Sie mit Zeilenhöhe spielen, um den Buchstaben gegenüber dem Element zu positionieren und zu erreichen, was Sie möchten. Zum Beispiel wird normalerweise eine Zeilenhöhe von etwa 0,75 bündig mit den oberen und unteren Buchstaben der Großbuchstaben eintreffen. Dies bedeutet, dass Sie den Buchstaben positionieren können, wenn Sie das Element positionieren. So zum Beispiel: 

* {
  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

Verschiedene Browser behandeln die Dezimalpositionierung unterschiedlich. Der Umgang mit gebrochenen Pixeln gehört nicht zu den CSS-Spezifikationen. Wenn also jetzt alles korrekt positioniert ist, kann es nach einem Browser-Update erneut zum Brechen kommen. Wenn Sie alle gebrochenen Pixelwerte entfernen und line-height:1 hinzufügen, sollte dies funktionieren.

Wenn dies nicht funktioniert, versuchen Sie es und lassen Sie mich wissen, was Sie sehen (ich verwende keine Safari oder FF). Überprüfen Sie die Variable span in jedem Browser. Das Tool sollte ein Rechteck markieren. Prüfen Sie, ob der obere Rand des Rechtecks ​​die Linie nicht berührt oder der obere Rand des Texts nicht den oberen Rand des Rechtecks ​​berührt. In Chrome berührt der obere Rand des Texts nicht den oberen Rand des Rechtecks. Die Lösung lautet line-height:1.

2
Leo Jiang

Schriftarten werden auf verschiedenen Browsern unterschiedlich dargestellt. Hier ist ein Capture derselben Textzeile. Es wurde in allen gängigen Browsern erfasst und übereinandergelegt, um die Größe des Problems zu veranschaulichen. (Entnommen aus diesem Artikel )

 enter image description here

Unterschiedliche Schriftarten führen zu unterschiedlichen Ergebnissen

Als ich den Text vertikal pixelgenau ausrichten musste, hatten wir ein Team, das etwas recherchierte. Wir haben festgestellt, dass einige Zeichensätze vertikal besser ausgerichtet waren als andere - es ist also einen Test wert.

Sie können es immer mit JS hacken

Wenn es sich um eine Safari handelt - ändern Sie die Höhe der Linie (oder den Rand oder was auch immer)

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

Bewahren Sie position: relative; für #btn_signup auf. Zentrieren Sie den Sign_up auch mit dem folgenden CSS

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

Es funktioniert in allen Browsern gleich.

* {
  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

Bitte ersetzen Sie diesen Code in 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