2009-03-11 2 views
17

Vor ein paar Tagen habe ich meine Website neu gehäutet. Die Entwicklung dieser Haut wurde hauptsächlich mit Safari gemacht, und wie erwartet, macht es alles gut mit Firefox und Oper. Ich musste ein paar kleine Verbesserungen für IE7 machen, aber nicht viel, bis auf ein Problem ...IE7 beschneidet meinen Text. Wie stelle ich seine Einstellung ein?

Die Datumsanzeigen für einen Beitrag sind in IE abgeschnitten. Dieses Problem scheint nur bei geschachtelten Span-Tags in einem linken schwebenden div zu auftreten. Ich denke, ich brauche die Floating Divs, um Text auf der linken und der rechten Seite des Bildschirms zu gestalten.

Kennt jemand von euch, wie man IE7 daran hindert, meinen Text zu beschneiden?

Edit: Ich habe eine Art von auf dieses Problem aufgegeben. Meine Skripte suchen jetzt nach IE7 und füttern es etwas vereinfachten HTML, das seine begrenzte Maschine handhaben kann. Es funktioniert in IE8, so, jetzt, nur der Spezialfall für IE7 wird tun müssen ...

+2

+1 Ich kann Ihnen keinen Einblick in dieses Problem geben, aber ich gebe Ihnen Anregungen, wie Sie die Frage ernsthaft angehen können. Weg, ein Beispiel zu geben! –

+0

große Frage, schätze die Mühe, genau zu erklären, was das Problem ist –

+0

Ich habe Ihre Quelle kopiert und ich habe damit herum gespielt, aber konnte nicht mit einer sauberen Lösung kommen. Ich habe jedoch das Gefühl, dass etwas auf einer allgemeinen Ebene riecht. Was ist, wenn IE das Richtige tut? Ich habe noch nie jemanden gesehen, der einen solchen Font-Overflow gemacht hat. – markus

Antwort

0

für die .bigdate-Klasse, versuchen Sie, Marge mit Polsterung zu ersetzen; scheint mir, dass dies etwas mit der Margin-Handhabung von IE zu tun hat.

1

Überlauf hinzufügen: sichtbar; zu Ihrer .postdate-Klasse. Vielleicht hilft das.

0

eine bestimmte Höhe Hinzufügen von Fixes es für mich .title (in IE6):

.title { 
    PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em; 
+0

Ja, aber weniger Glück mit IE7. Interessant ist, dass, wenn ich die divs und spans mit der Werkzeugleiste des Internet Explorer-Entwicklers betrachte, die Quadrate, die um sie gezogen werden, die richtige Größe haben! Es scheint nur beim Rendern zu kürzen. – Emiel

+0

Warum die Kappen auf den Eigenschaften? – alex

+0

Warum die Kappen? Gute Frage - wahrscheinlich erstellt von IE, wenn ich 'Save As' Webpage abgeschlossen habe - ich habe nur die 'Höhe' hinzugefügt. Habe es nach dem Tweak nicht gespeichert und konnte es nicht mit Sicherheit sagen. – Traingamer

0

Obwohl er nicht in der Lage es auf meinem aktuellen Computer zu testen: Ich würde vermuten, dass es sich um ein hasLayout bug ist. Die Methoden zum Umgang damit sind im Abschnitt "properties" dieses Links aufgeführt.

19

In den meisten Fällen, in denen Internet Explorer 6 oder 7-Clips aus dem Boden des Textes, fügen Sie einfach:

line-height: normal; 

auf die CSS-Regeln betroffen. Sollte es gut beheben, aber wie Sie verstehen, erweitert es die Box auch.

0

Nach meiner Erfahrung ist es immer die Unterseite des Textes, die abgeschnitten und das auch im Grunde wegen der überlappenden Divisionen. Wenn Sie sicherstellen können, dass sich die divs nicht überschneiden, wird das Problem gelöst. Das abgesehen davon, dass Überlauf: sichtbar hilft manchmal.

0

Versuchen Zugabe

div.postmeta { height: 100px; } 
div.postdate { height: 75px; } 

Willkürliche Höhenwert ... aber Sie würden wissen, die genaue Höhe Sie wollen. Das sollte verhindern, dass die Textcontainer in IE7 abgeschnitten werden.

11

Es gibt einen Hack, den ich herausgefunden habe, der das Problem des Abschneidens von Text in IE behebt. Ich bemerkte, dass die letzte Zeile in meiner Überschrift die einzige war, die abgeschnitten wurde.

Meine ursprüngliche CSS, die die letzte Zeile in IE7 abgeschnitten war, sah aber in anderen Browsern:

h2 { 
    font-size: 22px; 
    line-height: 1em; 
} 

Siehe Bild Problem hier: https://skitch.com/pablohart/f4g3i/windows-7-x64

Das Update habe ich einfach aufgenommen hat Zugabe Polsterung den Boden und dann diese Polsterung mit negativem Rand zurück.Wie folgt aus:

h2 { 
    font-size: 22px; 
    line-height: 1em; 
    padding-bottom: 5px; 
    margin-bottom: -5px; 
} 

Siehe Bild fix in diesem Bild: https://skitch.com/pablohart/f4g4h/windows-7-x64

Das Problem mit line-height: normal; ist, dass es die Standardzeilenhöhe für die Schriftart annimmt, normalerweise 1.3em.

+0

Oh für die Liebe Gottes danke für diese Antwort ..... das hat mich total verrückt gemacht! – potench

+0

Das hat mein Problem behoben! Das Setzen von Zeilenhöhe auf irgendwas hat entweder nicht funktioniert oder eine zusätzliche Textzeile gezeigt, aber nur davon. Hinzufügen von Bodenpolsterung behoben meine. Mein Problem war js generierter Text innerhalb eines 'textarea'. – jlafay

1

Ich hatte ein ähnliches Problem. Ich änderte meine Spanne in ein div und das Problem wurde gelöst. Ich denke, IE7 könnte ein Problem haben, Zeilenhöhe auf einer Spanne zu verarbeiten. Habe das nicht bestätigt. Es gab andere CSS-Elemente. (Arbeitet an jemand anderem Code.) Aber der Wechsel von span zu div (block) löste das Problem.

0

Ich denke, das Problem ist mit der Auffüllung. Ich habe versucht, einen "padding: 3px" Stil zu entfernen und es hat richtig funktioniert. Bisher hat es nichts gezeigt. Paul Harts Antwort hat mir das gezeigt.
Wahrscheinlich kann auch das Entfernen/Überschreiben von Randeigenschaften hilfreich sein.

Verwandte Themen