Проблема заполнения ячеек таблицы CSS в Firefox и IE8

Question

У меня возникли серьезные проблемы при попытке настроить макет в таблице. В Firefox я получаю странные несоответствия верхнего / нижнего отступов со всем текстом. И в Firefox, и в IE8 я не могу сделать так, чтобы мои иконки выглядели вертикально по центру в их ячейках.

См. Следующее:

альтернативный текст http://www.graphicsdistrict.com/css-issue.png

Вот мой стол 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;
}

Вот моя таблица 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>

Обратите внимание, что интервал до и / или после содержимого ячейки, по-видимому, не влияет на проблему ни положительно, ни отрицательно.

EDIT

Изменение CSS для использования единиц px вместо em исправляет пробел в левом столбце, но не решает проблему центрирования изображения по вертикали. Идеи?

РЕДАКТИРОВАТЬ 2

Сейчас есть демонстрация проблемы онлайн здесь .

Answer 1

Изображение вертикально выровнено на базовой линии, оставляя место для спусковых устройств - на всякий случай, если вы добавите текст. Выровняйте по вертикали снизу, и дополнительное пространство исчезнет.

td img {vertical-align:bottom;}

Answer 2

Попробуйте использовать пиксели для отступов и границ и посмотрите, решит ли это проблему. Я подозреваю, что тот факт, что вы используете ems, вызывает странный сбой округления, который вызывает разницу в 4px / 5px.

Answer 3

Попробуйте это в своих клетках, чтобы это работало, хотя я считаю, что клеткам нужна высота, указанная в них.

css по вертикали

Answer 4

<td valign="middle"> 

Не лучший способ, так как вы не используете css, но у меня это всегда работало.

Дополнительно взглянем на свойство css для строки line-height для ячейки. Если ваша ячейка имеет высоту 20 пикселей, установите высоту строки на 20 пикселей и т. Д.