ie7 css mit div rechtsbündig in TD

Das unten stehende Markup erzeugt 2 Textzeilen, wobei die 2. Textzeile zentriert ist und ein Bild unten rechts in der 2. Zeile. Zumindest in Firefox und ie8. In ie7 fügt es einen Zeilenumbruch hinzu und das Bild erscheint in einer dritten Zeile. Ich habe alle möglichen Dinge ohne Erfolg ausprobiert und das ie Developer Tool ist so nicht sehr nützlich.ie7 css mit div rechtsbündig in TD

Wie bekomme ich es richtig angezeigt (wie ie8) in ie7?

<table> 
    <tr><td>blah blah blah blah</td></tr> 
    <tr> 
     <td style="text-align:center;"> 
      Hi 
      <div style="float:right; background-image:url('aaa.png'); height:16px; width:16px;"> 
      </div> 
     </td> 
    </tr> 
</table>

Dies ist nur eine sehr vereinfachte Version von dem, was ich habe; Ich brauche die Tabelle Struktur, also bitte nicht vorschlagen, es zu einer Reihe von divs zu ändern :)

Quelle

2010-11-29 JumpingJezza

Ich weiß, dass Sie nicht vorgeschlagen, es zu einer Reihe von divs zu ändern, aber ich war wie Sie und benutzte Tabellen für alles - Layout, Daten, die Werke ... Aber sobald Sie den Dreh mit der Verwendung von klärt und schwimmt es wird viel einfacher. Verbringe Zeit damit, herauszufinden, wie clear/float funktioniert und versuche verschiedene Layouts - wie zweispaltig, dreispaltig, Produktdetails (wie auf vielen Websites mit dem Bild oben links, Details rechts daneben und die Beschreibung unten)). Sie sollten bald den Dreh raus haben. – ClarkeyBoy

@Clarkey: Ich stimme zu, und ich habe versucht, divs häufiger zu verwenden, aber diese spezielle Markup ist für ein schrecklich kompliziertes Projekt: Erstellen einer Office-artigen Multifunktionsleiste in HTML. Es funktioniert gut in ie8, also möchte ich nicht die 800 Zeilen von CSS und 400 Zeilen Markup nur um Platz für ie7 zu schreiben :) – JumpingJezza

Sie legen keine Breite auf dem Tisch, so dass es so klein wie möglich sein wird, um den Inhalt anzupassen.

Versuchen Sie auch, "Hi" in ein div (oder span) mit Schwimmer links zu setzen. Dies sollte theoretisch funktionieren.

Vielleicht möchten Sie beide Seiten in Spannen tatsächlich setzen, um darüber nachzudenken, wie divs standardmäßig auf die Größe ihrer Eltern (-border, Rand und Padding).

Hoffe, das hilft.

Grüße,

Richard

Edit: Die eigentliche Antwort auf diese Frage ist die Position des rechten schwebte div auf absolute, Höhe/Breite zu 16px, oben und rechts auf 0 Auch einzustellen entfernen die float: right. (Ich habe meine ursprüngliche Antwort dort so gelassen, dass a) die Kommentare Sinn ergeben und b) jeder, der dies in der Zukunft liest, weiß, dass die ursprüngliche Antwort nicht funktioniert hat).

Quelle

2010-11-29 03:19:14 ClarkeyBoy

Ich habe versucht, die "Hallo" in einem div floating links und es endete links ausgerichtet . Ich möchte den Text zentriert ausrichten. – JumpingJezza

Ah ja, vergaß die Hauptsache ... gib mir ein paar Minuten, um darüber nachzudenken - wenn ich an etwas denke, werde ich es dich wissen lassen. – ClarkeyBoy

Es ist mir gerade eingefallen - haben Sie versucht, den text-align: center auf das linksbündige div anzuwenden? – ClarkeyBoy

können Sie versuchen, die Reihenfolge des "Hallo" Umkehr und die <div>:

<table> 
    <tr><td>blah blah blah blah</td></tr> 
    <tr> 
     <td style="text-align:center;"> 
      <div style="float:right; background-color: #f00; height:16px; width:16px;"></div> 
      Hi 
     </td> 
    </tr> 
</table>

Das sieht das das gleiche in Chrome, Safari, Firefox, IE7, IE8 und Opera. Chrome, Safari und Firefox rendern beide Versionen gleich; IE7 und Opera rendern die ursprüngliche Version mit demselben Problem.

Ich änderte die background-image zu background-color, damit ich sehen konnte, was los war, sollte keine Auswirkungen auf das Rendering haben, aber IE7 ist ziemlich clever darin, eine Unordnung zu machen, also vielleicht nicht.

Quelle

2010-11-29 04:28:06

Wir haben das tatsächlich zur Arbeit gebracht - siehe die Kommentare zu meiner Antwort. Er endete mit der Position absolute, top 0 und right 0. – ClarkeyBoy

Nice, beim Aussortieren von IE7-Problemen geht es normalerweise so: Probier mal eine Reihe halb zufälliger 'margin' /' padding'/'display' /' position' es funktioniert dann schlagen Sie die Kneipe löscht die Erinnerungen. –

Yeah ... normalerweise trete ich in die Kneipe und lösche die Erinnerungen, bevor ich die Lösung finde lol ... bei Pub meine ich die 2 Liter Flaschen Cidre, die ich unter meinem Schreibtisch lag lol – ClarkeyBoy

Antwort

Verwandte Themen