Verschiedene CSS-Rendering für Span innerhalb von TD mit FF3.5 gegenüber FF3.0

Question

Ich habe eine Webseite, die eine Tabelle hat und innerhalb einer der td ist span, die eine kleinere Schriftart verwendet, schweben rechts, um es ganz rechts zu platzieren , und ein negativer Rand oben, so dass es mit größerem Text in der td ausgerichtet ist.

Mit Firefox 3.0 funktioniert es gut, aber ich habe gerade auf Firefox 3.5 aktualisiert und die Marge bewegt den Text zu weit.

Ich habe eine andere Seite, wo es zwei Span-Einträge gibt, wieder der zweite mit einer kleineren Schrift und negativen Rand und zeigt das gleiche Problem.

Auf einer dritten Seite, mit einem h3 gefolgt von einem Span, einer kleineren Schrift und einem negativen Rand, funktioniert es in Firefox 3.5 gut.

Ich habe Safari heute installiert und es funktioniert wie Firefox 3.5. Ich habe kein Problem mit IE, da ich bedingte CSS habe, um mit den verschiedenen IE-Versionen umzugehen (IE 7 verwendet eine negative Marge, aber IE 8 verwendet eine kleine positive Marge).

Fragen (schließlich: ^):

• Ist jemand bewusst Veränderungen für Spanne und negativen Margen für Firefox 3.5 Rendering?

• Wie sonst könnte ich HTML oder CSS schreiben, um das gleiche Ergebnis ohne browserspezifische Hacks zu erhalten?

Für den zweiten Fall, habe ich es aus zwei Spannweiten zu einer h3 und Spanne, wie der dritte Fall. Der erste Fall sind Tabellendaten, also verwende ich die Tabelle. Hier ist ein Fragment der Ausgabe:

<div id="content"> 
<table id="events2" cellspacing="0"> 
<tr class="month"> 
<td>August 2009<span class="gotop">(go to top)</span> 
</td></tr> 
<tr> 
<td> 
A table row</td> 
</tr> 
</table> 

Die zugehörige (hoffe ich) CSS ist:

div#content { 
    margin: 0; 
    padding: 0 
    width:100%; 
    background: white; 
    color: black; 
    font-size: 80%; 
} 
#events2 td { 
    padding: 4px; 
    border-bottom: 2px solid #BBB; 
} 
#events2 tr.month td { 
    padding: 0.125em 0; 
    font-size: 1.2em; 
    text-align: center; 
    border-top: 3px solid black; 
    border-bottom: 2px solid #BBB; 
} 
#events2 tr.month td .gotop { 
    float: right; 
    font-size: 0.6em; 
    margin-top: -1.4em; 
    padding-bottom: 0.3em; 
} 

Vielen Dank im Voraus! PCM

Answer 1

Firefox 3.5.2 ist nur eine Verbesserung der Beta. Ich würde nicht zweifeln, dass dies mit Firefox etwas falsch sein könnte, aber wenn Safari es auch tut, ist es wahrscheinlich Ihr Code.

Check out csszengarden.com, der "bessere" Weg, um eine Website zu gestalten.

Auch Sie sollten mit Tabellenlayouts vertraut sein. Ich habe noch nie von jemandem gehört, der einen negativen Rand auf einen td oder sogar einen Float setzt. Die Tische werden streng ausgelegt, wenn Sie also einen 200px breit machen, werden alle anderen so groß sein (es sei denn, Sie verschachteln Tische ineinander).

Ich würde sagen, nur die Tabellen fallen lassen, wenn sie wirklich benötigt werden.

Und können Sie einen Link zu der Seite senden, damit ich sehen kann, was genau falsch ist (ich benutze Safari 4.x Entwickler auf OS X).

Answer 2

Rendern zwischen Firefox 3.0 und 3.5 ist meiner Erfahrung nach sehr konsistent. Ich denke, das Problem hier ist der Ort der Floating-SPAN im Markup. Unter der Annahme, dass ich richtig verstehe, was Sie erreichen wollen, würde ich den floated SPAN vor den Inhalt des TD, der im normalen Dokumentenfluss gerendert werden soll.

Ich erstellte eine schnelle Testseite (mit XHTML Transitional Doctype) und implementiert die folgenden Änderungen an Ihrem Code. Ich sehe konsistente Rendering in Firefox 3.0, Firefox 3.5 und Safari 4.0 (alle unter Windows).

HTML:

<div id="content"> 
    <table id="events2" cellspacing="0"> 
     <tr class="month"> 
      <td><span class="gotop">(go to top)</span>August 2009</td> 
     </tr> 
     <tr> 
      <td>A table row</td> 
     </tr> 
    </table> 
</div> 

CSS:

#events2 tr.month td .gotop { 
    float: right; 
    font-size: 0.6em; 
    /*margin-top: -1.4em;*/ /* REMOVED */ 
    /*padding-bottom: 0.3em;*/ /* REMOVED */ 
    margin-left: 5px; /* ADD */ 
} 

Answer 3

Die Kombination aus dem zentrierten Text in der td und der rechten Schwimmer und negativen Marge auf der Spanne unterschiedlich in dem Browser gerendert werden.

Floating etwas richtig bedeutet, um es nach rechts zu bewegen und Inhalt nach der Anzeige auf der linken Seite. Sie verschieben den Text nach rechts und verwenden dann den negativen Rand, um ihn an die Grundlinie des Textes davor zu verschieben.

Verschieben Sie die Spanne vor dem Text nach links und es wird korrekt ausgerichtet mit dem negativen Rand.

<td><span class="gotop">(go to top)</span>August 2009</td> 

#events2 tr.month td .gotop { 
    float: right; 
    font-size: 0.6em; 
    padding-bottom: 0.3em; 
}