Wie verwendet man sehr große Schriftgrößen im Internet Explorer mit CSS, die das Design nicht beeinflussen?

Question

Die Schriftgröße, die ich an das Design anpassen muss, ist 85pt, was extrem groß ist. In IE6 und IE7 ist mein Entwurf betroffen, da die divs, die diese Elemente enthalten, größer werden als sie normalerweise sind, und als Ergebnis werden Elemente unter diesen Elementen weiter nach unten gedrückt, wodurch das Design etwas durchbrochen wird. Ich habe die Höhe für diese Elemente definiert und wenn ich die Schriftgröße verkleinern, beginnen die Elemente auf die richtige Größe zu verkleinern. Ich habe Zeilenhöhe hinzugefügt: 0; an das Element und das funktioniert in allen modernen Browsern.

Leider kann das Design, an dem ich arbeite, nicht öffentlich gezeigt werden, aber ich hatte gehofft, Einblick in andere mögliche Techniken zu bekommen, mit denen ich versuchen könnte, das Design richtig zu rendern. Die Höhe des übergeordneten Elements ist 144px, einschließlich 10px-Füllzeichen oben und unten und einem oberen und unteren 1px-Rahmen.

Leider gibt es nicht viel mehr, dass ich diese hinzufügen kann, aber ich werde schließen, was Informationen, die ich, wenn gefragt werde.

Answer 1

Vielen Dank für Ihre Eingabe.Ursprünglich benötigte ich absolute Positionierung auf dem fraglichen Element, während das Elternelement eine relative Positionierung hatte. Wenn Sie dies jedoch mit line-height: 0 verwenden, verschwand der Text in IE6 und 7; Nachdem ich versucht hatte, herauszufinden, wo der Text anfänglich war, entfernte ich die absolute Positionierung und entschied, den Text linksbündig in IE6 und 7 zu belassen, was die Position anderer Elemente beeinflusste. Ich habe die ursprüngliche absolute Positionierung erneut betrachtet und dem Element einen Rahmen hinzugefügt, um dessen Position anzuzeigen. Dies zeigte, dass es genau so war, wie ich es definiert hatte: ein Element mit einer Zeilenhöhe von 0 Pixel, also waren die oberen und unteren Ränder nebeneinander. Für IE6 und 7 habe ich Zeilenhöhe definiert: 100%; und mein Text war fast dort, wo ich ihn brauchte. Ich habe oben und die benötigten Pixel hinzugefügt und jetzt ist mein Element in der richtigen Position und seine Linienhöhe hat keinen Einfluss auf die anderen Elemente aufgrund der Positionierung.

Vielen Dank noch einmal für Ihre Hilfe.

Answer 2

Konvertieren Sie die Schriftgrößen zu Pixel und verwenden px statt pt. Stellen Sie sicher, dass Padding, Rand und Rahmen 0 sind. Stellen Sie sicher, dass in Ihrem HTML-Code kein Leerzeichen enthalten ist, außer zwischen den Wörtern. Whitespace kann als Newline oder Space angezeigt werden, wodurch Elemente größer als beabsichtigt werden. Setzen Sie die Zeilenhöhe auch nicht auf 0, sondern auf "Auto" oder "Schriftgröße".

Answer 3

Mein erster Gedanke beim Lesen Ihres Beitrags war, die Zeilenhöhe anzupassen, aber da Sie das bereits getan haben, bin ich mir nicht sicher, wie viel mehr getan werden kann. Aus Ihrer Zusammenfassung gehe ich hervor, dass das Design nicht geändert werden kann, um die großen Schriftgrößen zu berücksichtigen.

Eine andere Antworter empfohlen Pixelgrößen, aber ich würde mit ems empfehlen, da sie prozentual Abmessungen und konsistenter in allen Browsern, Bildschirme und Auflösungen werden.

Zeilenhöhe kann als 0 belassen werden (oder auf die Höhe des übergeordneten Elements eingestellt werden), aber der Text wird wahrscheinlich über anderen Elementen schweben, wenn die Höhe des Textes die Zeilenhöhe überschreitet.

Gibt es eine Möglichkeit, ein Bild für den Text zu verwenden? Das ist wirklich die einzige idiotensichere Methode, um alle Browser konsistent aussehen zu lassen.

Answer 4

Zeilenhöhe: 0 ist ein guter Start. Ich bin jedoch ein wenig besorgt über die 10px Padding auf dem Elternelement. Wann immer Sie Padding mit IE mischen, verlieren Sie die Kontrolle über die Breite & Höhe.

Ich würde beginnen, indem Sie das Padding-Top auf dem Elternteil entfernen und das in ein Rand-Top: 10px auf dem tatsächlichen untergeordneten Element konvertieren. Wenn Ihnen das immer noch Probleme bereitet, entfernen Sie den Rand und versuchen Sie eine Position: relativ zum Kind mit einem Top: 10px.

Versuchen Sie schließlich, einen Überlauf hinzuzufügen: versteckt zu Ihrem übergeordneten Element, um es zu zwingen, nicht zu rühren, wenn die Schriftgröße größer wird.

All dies hängt davon ab, was Ihr Kind Element tatsächlich ist. Wenn Sie es in ein Inline-Element (wie span, em oder strong) konvertieren, kann es helfen, einige Renderingprobleme zu beheben, abhängig von Ihren vordefinierten Stilen.

Eine andere Sache zu prüfen - verwenden Sie Floats? Manchmal bekommen Sie ein Double-Float-Problem mit IE und Floats. Eine schnelle Google für "IE Double Float" wird Ihnen zeigen, warum.

Hilft das?