cuestión relleno de las celdas de tabla CSS en Firefox e IE8

Question

Estoy teniendo algunos problemas graves que tratan de modificar mi diseño en una tabla. En Firefox consigo principales inconsistencias de relleno extraños / inferiores con todo el texto. En tanto en Firefox e IE8 me parece que no puede hacer mis iconos aparecen centrados verticalmente en sus celdas tampoco.

Vea la siguiente manera:

texto alternativo http://www.graphicsdistrict.com/css-issue.png

Aquí está mi mesa CSS:

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;
}

Aquí está mi tabla HTML:

<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>

Tenga en cuenta que el espaciado antes y / o después no parece el contenido de la celda para afectar el problema, ya sea positiva o negativamente.

Editar

Cambio de la CSS para usar unidades px en lugar de em fija el trote texto de la columna izquierda, pero no resuelve el problema de centrado vertical de la imagen. Ideas?

EDIT 2

Ahora hay una demostración de la edición en línea aquí .

Answer 1

La imagen es alineados verticalmente en la línea de base dejando espacio para descendentes - en caso de que agrega el texto. Alinear verticalmente hasta el fondo y el espacio extra desaparece.

td img {vertical-align:bottom;}

Answer 2

Trate de usar píxeles para su relleno y fronteras y ver si se soluciona el problema. Sospecho que el hecho de que estás usando EMS está generando algún problema técnico redondeo raro que hace que el / la diferencia 5px 4 píxeles.

Answer 3

Probar en sus células, para que esto funcione aunque creo que las células necesitan una altura especificada en ellos.

css vertical-align

Answer 4

<td valign="middle"> 

No es la mejor manera, ya que no utiliza CSS, pero siempre trabajó para mí.

Adittionally, echar un vistazo a la propiedad CSS line-height para la célula. Si tu teléfono es de 20 píxeles de alto, establecer línea de altura a 20 píxeles, etc.