4


0

IE 7のテーブルセル内のdivで正しく整列させるにはどうすればよいですか。

テーブルセル内の「+ div」に指定された「+ Float:right」は、IEでは効果がないようです。 また、レイヤ7の内容を右に揃えるために、テキストの揃えを試みましたが、IE 7では成功しませんでした。

CSSスニペット:

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}

HTMLスニペット:

        1

HTMLとCSSの両方が検証され、Firefoxではテキストが正しく配置されます。 あなたがそれをコピー/ペーストすることによって完全なコードをテストしたいならば、それはここにあります:

        Table Test

td {
    border: 1px solid black;
}


.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}



div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}









                     

2008

Q1

Q2

Q3

Q4

ワークロード予測

1

2

2

2

実際の作業負荷

3

3

2

3

(クラス宣言がいくつかの要素に対して繰り返されるという意味でCSSは最適ではないことを私は知っていますが、問題に関連しない場合は、これについてコメントしないでください。)

3 Answer


5


それはあなたがそれを持っている方法(またはアレクシアが示唆する方法)でうまくいくはずです。

しかし、(これはIEです)、ヘッダー Q1、Q2など テーブルの列を要求した14ピクセルより広くプッシュしています。

列は定義した14ピクセル以内で右寄せされていますが、IEではdivが右に移動していません。 (列は14pxより実際には広くなっていますが、divはそれに対して定義された14px内に留まります)

これを説明するために、幅を28px *とするか、または背景の1つの色を変更して、in内のtdとdivの違いを示すことができます。

.workloadcell {
背景色:#E6D7E9。パディング:0px。幅:14ピクセル。高さ:16ピクセル。 text-align:正しいです。 }

div.workload {背景色:#E6EEE9; text-align:正しいです。幅:14ピクセル。フロート:右。 }

IEの解決策は、ヘッダを収容するのに十分な幅にするために幅_or_を定義しないことです。


3


あなたはdiv.workloadのために規則を宣言する必要はありません。 この規則だけを使うと、すべてうまくいくでしょう。

td {ボーダー:1px、黒一色。 }

.workloadcell {背景色:#E6D7E9;パディング:0px。幅:20ピクセル。高さ:16ピクセル。 text-align:正しいです。 }


1


注目すべきは、IE、特にSP1 XP以前のv6、およびそれ以前のウィンドウでは、div内のテーブルとそれらのテーブル内のdivを混在させると、深刻なレンダリングの問題が発生することです。 一定の複雑さを超えたら

特定のセルのテキストコンテンツを右揃えにする必要がある場合は、divを入れ子にするのではなく、tdタグにクラス宣言を追加することをお勧めします。 私はまたIE8で試みることを提案し、問題が解決しないかどうか見る。 どのバージョンをサポートする必要があるか言及していません。