Ist es möglich, in allen Browsern Konsistenz in der Zeilenhöhe zu erreichen?

Ist es möglich, in allen Browsern Konsistenz in der Zeilenhöhe zu erreichen?Ist es möglich, in allen Browsern Konsistenz in der Zeilenhöhe zu erreichen?

Ich habe ein Bild angehängt. Sie werden eine rote rechteckige Schachtel und eine grüne rechteckige Schachtel (beide von gleicher Breite und Höhe) bemerken, die ich manuell über Photoshop hinzugefügt habe, um den Abstand zwischen den gepunkteten Linien (unter der roten Schachtel) und der "Anhänger: 3197179" Text.

Es scheint, dass Firefox das einzige ist, das die Elemente anders anzeigt. Das merke ich, wenn ich eine Zeilenhöhe anlege. Irgendwie kann ich das mit allen Browsern konsistent machen?

Ich benutze Firefox 3.6.13, Safari 5.0.3, Opera 10.63 und Chrome 8.0.552.231.

CSS:

.clearfix, .container {display:block;} 

ul   { margin:0; padding:0; list-style:none; } 
li   { position:relative; margin:0 0 0 0; padding:12px 0; border-bottom:1px dotted #E7E7E7; } 

li img  { float:left; margin-top:0; } 

li p  { margin:0 0 0 58px; padding:0; font-weight:normal; border:none; font-size:1em; line-height:1.3em; } 
li p.name  { position:relative; padding-top:0; font-size:1.1em; font-weight:bold; }

HTML

<ul> 
    <li class="clearfix"> 
      <a href="#"><img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb"></a> 
      <p class="name"> 
       <a href="#">Jessica Simpson</a> 
      </p> 
      <p>Blurred out text here</p> 
      <p>Followers: 3197179</p> 
    </li> 
</ul>

alt text

Quelle

2010-12-17 Christian Fazzini

Ich kenne den Unterschied nur durch ein oder zwei Pixel. Aber das ist eine Anforderung des Kunden und ein "Muss". Ist so etwas möglich oder sollte ich dem Kunden erklären, dass 1-2 Pixel Unterschied von Browser zu Browser unmöglich zu erreichen ist? –

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ – Flack

Hallo Flack, es gibt bestimmte Dinge, die ich erreichen kann, mit wenig Aufwand und ohne "CSS-Hacks", um die Visualisierung für alle Browser gleich aussehen zu lassen.Ich frage mich jedoch, ob der Fall in meinem ersten Beitrag in die Kategorie "unmöglich" fällt –

Ihre derzeit verwendeten ems. Vielleicht können Sie versuchen, genauer zu sein, indem Sie versuchen, px sowohl in Zeilenhöhe als auch in Schriftgröße zu verwenden. Versuchen Sie auch Padding in diesen Texten zu verwenden, vielleicht wird es funktionieren, denke ich;).

In jedem Cross-Browser-Sache, die Sie tun. Es gibt keine konkrete Möglichkeit, Dinge so zu machen, dass sie bei jedem Renderer gleich sind. Es ist immer ein Traum, den die meisten Kunden nicht verstehen. Für mich ist es besser, ihnen immer zu erklären, was sie wollen und wie viel Zeit wir in Dingen wie 1px/2px-Differenzen verbringen. Es ist ganz normal. Sie können this video by Andy Clarke speaking about cross browser and some other cool stuff überprüfen.

Quelle

2010-12-18 02:14:23

Hallo Ragingmon, versuchte mit Pixeln statt. Das Ergebnis war sehr schlimm. Was mehr Platz/Lücke bedeutet. Interessantes Video :-) Danke für das Aufzeigen –

Kein Problem Kumpel. Also irgendwelche Lösungen bisher? : D –

Ich habe es im Grunde nur erklärt. Perfektion über alle Webbrowser ist unmöglich :-) –

Sie ein CSS-Reset verwenden? Diese helfen, die meisten browserübergreifenden Probleme zu beheben. Meyer Web hat eine beliebte: http://meyerweb.com/eric/tools/css/reset/

Quelle

2010-12-17 20:51:40

z. B., http://meyerweb.com/eric/tools/css/reset/ – BryanH

Hallo Babak, yep, derzeit mit Blueprint, die reset.css enthält, und bereits geladen –

Haben Sie irgendwelche gemeinsamen Regeln festgelegt? Beispiel:

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-size: 100%; 
    line-height: 1; 
}

Manchmal ist es hilfreich, auch ohne vollständigen reset.css-Ansatz.

Quelle

2010-12-17 20:53:30 Flack

Ja, haben diese auch eingestellt. Ich sehe immer noch 1-2 Pixel Lücke Unterschied wie im Screenshot in der ursprünglichen Post –

Ich fand dies in einer anderen Umgebung nützlich. Danke für das Teilen! – kevincoleman

Sie können nur line-height für Mozilla hinzufügen, unter Verwendung von:

@-moz-document url-prefix() { 
    *, body { 
     line-height: [as per your requirement]; 
    } 
}

Quelle

2017-11-22 14:24:26

Diese Methode scheint nicht mehr von Mozilla unterstützt zu werden. https://developer.mozilla.org/en-US/docs/Web/CSS/@document – jtheletter

Es könnte sein, wie die Schrift dargestellt wird. Versuchen Sie es als eine Schriftfamilie.

font-family:"Arial Unicode MS","Lucida Sans Unicode";

Quelle

2018-03-05 19:58:26

Ist es möglich, in allen Browsern Konsistenz in der Zeilenhöhe zu erreichen?

Antwort

Verwandte Themen