Absolute Position Div verhindert, dass td auf 0 Höhe in Firefox

Question

Ich habe eine <td>, die eine <div> enthält, wo die div ist absolut positioniert. Die <td> wird dann auf 0 gesetzt, indem die Höhe height, line-height, border, and padding-top/padding-bottom CSS-Eigenschaften auf 0.

Das Ergebnis, wenn es mit einer Reihe von anderen Elementen und Javascript kombiniert, die keinen Einfluss auf die Ausgabe aufweisen, ist eine Kopfzeile, die gut schweben über der Tabelle, während sie korrekt mit den Tabellenspalten ausgerichtet bleibt.

Dies funktioniert in jedem Browser und Betriebssystem, mit dem ich testen konnte (Safari, Chrome, IE unter Windows und Mac), außer Firefox. In Firefox die <tr> enthält die 0 Höhe <td> in Frage ist als 4 Pixel hoch - aber nur, wenn die <div> innen ein position Attribut von absolute oder fixed hat. Wenn ich beispielsweise position von relative verwende, wird die Zeile korrekt auf 0px high reduziert. Natürlich brauche ich eine Position von absolute auf dem Div, um alles andere zu arbeiten.

Wie kann ich auch Firefox erhalten, um die <tr>/<td> richtig zu reduzieren?

html:

<table id="zeroHeight"> 
    <tr> 
     <td> 
      Some Content that should disappear 
      <div>Content that should have no background</div> 
     </td> 
    </tr> 
</table> 

CSS:

#zeroHeight tr{ 
    background-color:lightblue; 
} 

#zeroHeight tr td{ 
    height:0px; 
    padding-top:0px; 
    padding-bottom:0px; 
    line-height:0px; 
    border:0px; 
    color:transparent; 
    white-space: nowrap; 
} 

#zeroHeight td div{ 
    position:absolute; 
    color:black; 
} 

HINWEIS: Das Problem hier ist nicht mit der Positionierung des absoluten DIV. Das funktioniert gut, deshalb habe ich im Beispiel keine Positionierung berücksichtigt. Das Problem ist, dass die <TD>/<TR> nicht richtig auf Null Höhe nicht kollabiert nach unten, wie durch die sichtbare Hintergrundfarbe zu dem <tr>

EDIT angewandt angezeigt: Das Problem hier ist die Nicht-Null Höhe des td/tr, nicht sichtbar Hintergrundfarbe. Die Hintergrundfarbe in der Zeile ist einfach eine einfache Möglichkeit, das Problem sichtbar zu machen.

Answer 1

Ich würde tr und td so nicht stylen. Warum wickelst du den unsichtbaren Inhalt nicht in ein extra Div und versteckst das?

HTML:

<table id="zeroHeight"> 
    <tr> 
     <td> 
      <div class="invisible">Some Content that should disappear</div> 
      <div class="visible">Content that should have no background</div> 
     </td> 
    </tr> 
</table> 

CSS:

#zeroHeight tr td div.invisible{ 
    background-color:lightblue; 
} 

#zeroHeight tr td div.invisible { 
    height:0px; 
    padding-top:0px; 
    padding-bottom:0px; 
    line-height:0px; 
    border:0px; 
    color:transparent; 
    white-space: nowrap; 
} 

#zeroHeight td div.visible{ 
    position:absolute; 
    color:black; 
} 

Siehe hier: https://jsfiddle.net/2j2s9jys/1/