قضية الحشو خلية الجدول CSS في فايرفوكس و IE8

Question

أواجه بعض المشكلات الخطيرة التي تحاول تعديل تخطيطي في طاولة. في فايرفوكس أحصل على تناقضات الحشو أعلى / أسفل غريبة مع كل النص. في كل من 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>

لاحظ أن التباعد قبل و / أو بعد محتويات الخلية لا يبدو أنه يؤثر على المشكلة، إما إيجابيا أو سلبا.

تعديل

تغيير CSS لاستخدام وحدات PX بدلا من EM يعمل على إصلاح JOG نص العمود الأيسر، ولكن لا يحل مشكلة تركز الصورة الرأسية. الأفكار؟

تحرير 2.

هناك الآن دليل على القضية على الانترنت هنا.

Answer 1

الصورة محاذاة رأسيا على أساس الأساس مغادرة لغسل النزول - فقط في حالة إضافة نص. محاذاة رأسيا إلى الأسفل وتختفي المساحة الإضافية.

td img {vertical-align:bottom;}

Answer 2

حاول استخدام البكسل لحشوتك وحدودك ومعرفة ما إذا كان ذلك يحل المشكلة. أظن أن حقيقة أنك تستخدم EMS تولد بعض خلل التقريب الغريب الذي يسبب الفرق 4px / 5px.

Answer 3

جرب هذا في خلاياك، لهذا العمل على الرغم من أنني أعتقد أن الخلايا تحتاج إلى ارتفاع محدد فيها.

CSS العمودي محاذاة

Answer 4

<td valign="middle"> 

ليس أفضل طريقة، لأنك لا تستخدم CSS، لكنها تعمل دائما بالنسبة لي.

Adittionally، نلقي نظرة على خاصية CSS الارتفاع للخلايا. إذا كانت خليتك عالية من 20 بكسل، فقم بتعيين خط الارتفاع إلى 20px وما إلى ذلك