1

テーブル セル内に配置された div に問題があります。セルの高さは固定されており、div は高さ:100% で相対的に配置されます。

jsfiddle の例

td {
    height:80px;
    width: 80px;
}
.cell_text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    position:relative;
}

ここに画像の説明を入力

div のコンテンツを変更し、div の高さがセルの高さよりも大きくなると、問題が発生します。IE と FF の動作は次のとおりです。

ここに画像の説明を入力

次の図は、Chrome の動作を示しています。

ここに画像の説明を入力

Chrome の動作はまさに私が必要としているものです。IE と Firefox で同じように動作させるにはどうすればよいですか?

4

2 に答える 2

2

不要なマークアップとCSSを削除しましたが、正常に動作しているようです。

position: relativeあまり意味がなく、border-fixdivは不要のようで、問題も発生しました。テーブル（および持つ要素display: table-cellなど）はheight、この場合のように、単純なブロック要素ではない場合があります。

冗長なCSSもたくさんありました。Fiddleをご覧ください。Chrome、FF、IE9でテスト済み。

したがって、これはマークアップになります。

<td class="border">
    <div class="cell_wrapper">
        <div class="cell_text">
            line-1
        </div>
    </div>
</td>

そして関連するCSS：

#mytable td {
    height:80px;
    width: 80px;
    text-align: center;
}

.cell_wrapper {
    display: table;
    height: 100%;
    width: 100%;
}

.cell_text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
于 2012-12-20T22:25:23.717 に答える
-1

Firefox は、セルの動作を制御するいくつかの可能性を提供しますが、IE7 をサポートする必要がある場合は、うまくいきません。 display: table-cell;IE7 以前では動作しません。

于 2012-12-20T22:13:38.753 に答える