1

テーブルのレイアウトを微調整しようとして深刻な問題が発生しています。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>

セルのコンテンツの前後のスペースは、プラスにもマイナスにも問題に影響を与えないように見えることに注意してください。

編集

em ではなく px 単位を使用するように CSS を変更すると、左の列のテキストのジョグは修正されますが、垂直方向の画像のセンタリングの問題は解決されません。アイデア？

編集2

現在、オンラインでこの問題のデモンストレーションがここにあります。

4

4 に答える 4

9

テキストを追加する場合に備えて、画像はベースラインに垂直に配置され、ディセンダー用のスペースが残されています。垂直方向に下に揃えると、余分なスペースがなくなります。

td img {vertical-align:bottom;}
于 2009-07-15T11:01:02.077 に答える
2

パディングとボーダーにピクセルを使用してみて、問題が解決するかどうかを確認してください。あなたがemsを使用しているという事実が、4px/5pxの違いを引き起こす奇妙な丸めグリッチを生成していると思われます.

于 2009-07-15T10:01:21.417 に答える
0

これを機能させるには、セルでこれを試してください。ただし、セルには高さを指定する必要があると思います。

CSS垂直整列

于 2009-07-15T10:38:01.357 に答える
0 
<td valign="middle">

あなたはcssを使用していないので、最善の方法ではありませんが、私にとっては常にうまくいきました。

さらに、セルの line-height css プロパティを見てください。セルの高さが 20px の場合、line-height を 20px に設定します。

于 2009-07-15T10:32:44.177 に答える