1

フォームをテーブルでラップしています。

私のテーブルは次のとおりです。9セル、3行、3列、[0,0]は左上隅、[1,1]はメインフォームのコンテンツ、[2,2]は右下隅です[すべてインデックスがゼロです私の説明で]。フォームをラップして、フォームの周りに「ドロップ シャドウ」を配置できるようにします。

私の問題: [行 0] と [行 2] のセルの高さは 8px であると想定されていますが、代わりに 22px です。

テーブルの 4 つのコーナー セルを使用して丸みを帯びたエッジを表示していますが、他の 4 つの「エッジ」セルは 1 ピクセルの寸法の背景を繰り返しています。 [row 0] と [row 2] の repeat-x' では、td が高さに正しく固定されていません。

Borwsers : IE は 'IE 7/8' 互換ビューでのみ問題を示していましたが、chrome と firefox は同じことを始めました。私の DOCTYPE が影響していると思います。

スクリーン ショットの部分を添付し、HTML が生成する恐ろしく長い Web リソース URL を削除するために編集した HTML をいくつか添付しました (これを Web コントロールとして作成しています)。

問題を示す左上隅のスクリーン ショット

<table cellpadding=0 cellspacing=0 border=0 style="width:560px;">
<tr>
    <td style="background-image:url('url'); width:8px; height:8px;">
        <img src='url' width='8' height='8'/>
    </td>   
    <td style="background-image:url('url'); height:8px;">
        <img src='url' height='8'/>
    </td>   
    <td  style="background-image:url('url'); width:9px; height:8px;">
        <img src='url' width='9' height='8'/>
    </td>
</tr>
<tr>
    <td style="background-image:url('url'); width:8px;">
    </td>
    <td  style="background-color:#DDDDDD">
        <!-- main table content !-->
    </td>
    <td style="background-image:url('url')">
    </td>
</tr>
<tr>
    <td style="background-image:url('url') width='8' height='9'>
        <img src='url' width='8' height='9'/>
    </td>
    <td style="background-image:url('url') height='9'>
    </td>
    <td style="background-image:url('url'); width:9px; height:9px;">
        <img src='url' width='9' height='9'/>
    </td>

</tr>

</table>

以前は、表の高さや幅が正しく確認されないという問題がありました。以前の修正では、高さを強制するテキスト (または黒い文字) がないことを確認し、表のセルが空でないことを確認しました (私は一部のセルに bg 画像を img タグとして挿入しましたが、効果はありません)。

これが HTML のよく知られた問題であることを本当に願っています。助けてください。

4

1 に答える 1

1

通常、私はレイアウトでテーブルを使用することを非難しますが、これは実際には適切な代替手段がない 1 つのケースです (おそらく、border-imageより良いサポートが得られる可能性があります)。そうは言っても、HTML5 仕様ではrole="presentation"、スクリーン リーダーなど (視覚障害者のアクセシビリティなど) のために、レイアウトに使用されるテーブルに属性を指定する必要があります。それはおそらく彼らに苦労を与えることになるだろうし、おそらく検索エンジンのスパイダーを台無しにすることになるだろうが、それはあなたの選択だ.

第二に、そのようなインライン スタイリングは、メンテナンスの悪夢を引き起こします。外部スタイルシートを用意し、それを に含める必要があります<link rel="stylesheet" type="text/css" href="URL.css"/>。classと属性を使用idすると、テーブル (またはその他のもの) のスタイル設定がはるかに簡単になります。

3 番目に、Doctype が問題を引き起こしていると考えているが、それを含めていないと述べています。とにかく、おそらく HTML5 doctype を使用する必要があります<!DOCTYPE html>。古い HTML 4.x/XHTML 1.x/etc. doctypes を使い続けるのはおそらく良いことではありません。

これらをすべてまとめると、次のような HTML になります。

<!DOCTYPE html>
<html>
    <head>
        <!-- any other header stuff you need, like meta or title -->
        <link rel="stylesheet" type="text/css" href="something.css"/>
    </head>

    <body>

        <table id="mainLayout" role="presentation">
            <thead>
                <tr>
                    <td class="left-cell"></td>
                    <td></td>
                    <td class="right-cell"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="left-cell"></td>
                    <td><!-- main content goes here. --></td>
                    <td class="right-cell"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="left-cell"></td>
                    <td></td>
                    <td class="right-cell"></td>
                </tr>
            </tfoot>
        </table>

    </body>
</html>

CSSの場合：

テーブル#メインレイアウト
{
    マージン: 0;
    パディング: 0;
}

テーブル#mainLayout td
{
    マージン: 0;
    パディング: 0;
}

table#mainLayout thead tr
{
    高さ: 8px;
}

table#mainLayout tfoot tr
{
    高さ: 9px;
}

table#mainLayout .left-cell
{
    幅: 8px;
}

table#mainLayout .right-cell
{
    幅: 9px;
}

table#mainLayout thead td
{
    background-image: url(画像の場所はどこでも);
}

table#mainLayout thead td.left-cell
{
    background-image: url(画像の場所はどこでも);
}

table#mainLayout thead td.right-cell
{
    background-image: url(画像の場所はどこでも);
}

table#mainLayout tbody td
{
    background-image: url(画像の場所はどこでも);
}

table#mainLayout tbody td.left-cell
{
    background-image: url(画像の場所はどこでも);
}

table#mainLayout tbody td.right-cell
{
    background-image: url(画像の場所はどこでも);
}

table#mainLayout tfoot td
{
    background-image: url(画像の場所はどこでも);
}

table#mainLayout tfoot td.left-cell
{
    background-image: url(画像の場所はどこでも);
}

table#mainLayout tfoot td.right-cell
{
    background-image: url(画像の場所はどこでも);
}

より具体的なルール ( .left-cell/を含む.right-cell) は、あまり具体的でないルールをオーバーライドするため、ルールを設定する必要はありません.center-cell。

于 2012-08-02T16:58:03.017 に答える