CSS-Tabelle Zelle Polsterung Problem in Firefox und IE8

Question

Ich habe einige ernste Probleme, die versuchen, mein Layout in einer Tabelle zu zwicken. Im Firefox bekomme ich merkwürdige Unter-/Auffüll-Inkonsistenzen mit dem gesamten Text. Sowohl in Firefox als auch in IE8 kann ich nicht scheinen, dass meine Icons auch vertikal in ihren Zellen zentriert erscheinen.

See wie folgt:

alt text http://www.graphicsdistrict.com/css-issue.png

Hier ist css meinen Tisch:

table.maxwidth { 
    width: 100%; 
} 

table.standard th { 
    color: white; 
    font: bold 0.85em Century Gothic; 
    padding: 0.6em; 
    background-color: #424E4F; 
} 

table.standard td { 
    padding: 0.2em 0.5em; 
} 

table.standard tr + tr > td { 
    border-top: 1px dotted #ccc; 
} 

table.standard th + th { 
    border-left: 1px solid white; 
} 

table.standard td + td { 
    border-left: 1px dotted #ccc; 
} 

table.standard > tfoot > tr > td { 
    border-top: 0.18em solid #424E4F; 
    padding: 0.2em 0.5em; 
} 

table.striped tr.alt td { 
    background-color: #eee; 
} 

table.hover tr:hover td { 
    background-color: #e0e0e0; 
} 

Hier HTML meinem Tisch:

<table class="standard maxwidth striped hover"> 

    <thead> 
     <tr> 
      <th class="left">Accessory</th> 
      <th class="center">Available</th> 
      <th class="right">Options</th> 
     </tr> 
    </thead> 

    <tbody> 

     <tr> 
      <td class="label"><a href="/mss/Accessory/Edit/4">Mains Charger</a></td> 
      <td class="center"> 

      <img src="/mss/Static/images/icons/tick.png" /></td> 
      <td class="right"> 
      <a href="/mss/Accessory/Archive/4" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a> 
      /<a href="/mss/Accessory/Delete/4" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a> 

      </td> 
     </tr> 

     <tr> 
      <td class="label"><a href="/mss/Accessory/Edit/3">Bluetooth Headset</a></td> 
      <td class="center"> 

      <img src="/mss/Static/images/icons/tick.png" /></td> 
      <td class="right"> 
      <a href="/mss/Accessory/Archive/3" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a> 

      /<a href="/mss/Accessory/Delete/3" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a> 
      </td> 
     </tr> 

     <tr> 
      <td class="label"><a href="/mss/Accessory/Edit/2">Car Kit</a></td> 
      <td class="center"> 

      <img src="/mss/Static/images/icons/tick.png" /></td> 

      <td class="right"> 
      <a href="/mss/Accessory/Archive/2" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a> 
      /<a href="/mss/Accessory/Delete/2" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a> 
      </td> 
     </tr> 

     <tr> 
      <td class="label"><a href="/mss/Accessory/Edit/1">Leather Phone Case</a></td> 

      <td class="center"> 

      <img src="/mss/Static/images/icons/tick.png" /></td> 
      <td class="right"> 
      <a href="/mss/Accessory/Archive/1" onclick="if(!confirm('Are you sure you want to archive this Accessory?')) return false;">Archive</a> 
      /<a href="/mss/Accessory/Delete/1" onclick="if(!confirm('Are you sure you want to delete this Accessory?\nRelated historical data and reports will be affected!')) return false;">Delete</a> 
      </td> 
     </tr> 


    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="3"><a href="/mss/Accessory/New">Add an Accessory</a></td> 
     </tr> 
    </tfoot> 
</table> 

Beachten Sie, dass der Abstand vor und/oder nach dem Inhalt der Zelle scheint das Problem auch nicht zu beeinflussen positiv oder negativ.

EDIT

die CSS ändern px Einheiten statt em fixiert die linke Spalte Text jog zu verwenden, aber die vertikale Bild Zentrierung Problem nicht lösen. Ideen?

EDIT 2

Es gibt jetzt eine Demonstration des Problems online here.

Answer 1

Das Bild ist vertically aligned auf der Basislinie so dass Raum für Unterlängen - nur für den Fall Sie Text hinzufügen. Vertikal auf den Boden ausrichten und der zusätzliche Raum geht weg.

td img {vertical-align:bottom;} 

Answer 2

Probieren Sie Pixel für Ihre Polsterung und Grenzen und sehen, ob das das Problem löst. Ich vermute, dass die Tatsache, dass Sie ems verwenden, einen seltsamen Rundungsfehler erzeugt, der den Unterschied von 4px/5px verursacht.

Answer 3

<td valign="middle"> 

Nicht der beste Weg, da Sie nicht CSS verwenden, aber es hat immer für mich funktioniert.

Werfen Sie einen Blick auf Zeile-Höhe CSS-Eigenschaft für Zelle. Wenn Ihre Zelle 20px hoch ist, setzen Sie die Zeilenhöhe auf 20px etc.

Answer 4

Versuchen Sie dies in Ihren Zellen, damit dies funktioniert, obwohl ich glaube, dass die Zellen eine bestimmte Höhe benötigen.

css vertical-align