0

同じセッションのさまざまな段階で Web サイトの表示が異なるという問題があります。PageLoad でページがどのように表示されるかを次に示します。

ここに画像の説明を入力

テーブルにはいくつかのデータが入力されており、空のフィールドはすべてユーザー入力用の DropDownLists です。テーブルは中央に配置され、DropDownLists を含むフィールドはすべて同じ幅であることに注意してください。

ユーザー入力が保存された後のページの表示方法を次に示します。

ここに画像の説明を入力

DropDownLists はすべて、選択された画像に置き換えられました (何もない可能性があります) が、現在、テーブルは中央に配置されておらず、すべてのテーブルから右側の境界線が失われ、右側の列の 3 番目と 4 番目のテーブルにはフィールドの任意の幅があります。これらはすべて class=image であり、75px の固定幅を持つ必要がありますが、DropDownLists が含まれていました。

関連する CSS は次のとおりです。

.outer
{
    border: none;
    margin-left: auto;
    margin-right: auto;
}
.image
{
    padding: 0;
    margin: 0;
    width: 75px;
}

外側のクラスは外側の含まれるテーブル (ネストされたテーブル) 用であり、画像クラスは選択された画像に置き換えられる DropDownLists を含むフィールド用です。

Firefox ではこの問題は発生せず、Firefox と IE8 でのみテストしました。

アドバイスをいただければ幸いです。

編集: 完全な CSS ファイルは次のとおりです。

.outer
{
    border: none;
    margin-left: auto;
    margin-right: auto;
}
.outer td
{
    vertical-align: top;
}
.column
{
    border: none;
}
#rightColumn table, #leftColumn table
{
    width: 100%;
}
.cell
{
    border-collapse: collapse;
    border: 2px solid black;
    margin: 5px;
}
.cell td
{
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
    vertical-align: middle;
}
.image
{
    padding: 0;
    margin: 0;
    width: 75px;
}
.messages td
{
    border-collapse: collapse;
    border: 2px solid #FF0000;
    text-align: left;
}
h1
{
    text-align: center;
    font-size: 350%;
}
h2
{
    text-align: center;
}
th
{
    background-color: #2B60DE;
    color: #FFFFFF;
}
.gray
{
    background-color: #AAAAAA;
}
.blue
{
    background-color: #2B60DE;
}
.orange
{
    background-color: #FFA500;
}
.green
{
    background-color: #00FF00;
}
.red
{
    background-color: #FF0000;
}
.yellow
{
    background-color: #FFFF00;
}
.white
{
    background-color: #FFFFFF;
}
#lob
{
    vertical-align: bottom;
    text-align: center;
}
.centered
{
    text-align: center;
    padding: 10px;
}

編集: 開発者ツールの HTML タブ:

ここに画像の説明を入力

4

1 に答える 1

1

私はそこに推測を投げかけるつもりです：あなたのポストバックの何かがブラウザをQuirksモードに強制しています。特に、に設定marginするとauto、Quirksモードでは機能しません。

これを確認するには、影響を受けるページでF12キーを押します。表示される開発ツールで、上部の「ドキュメントモード」を確認します。それが癖なら、何かがおかしい。そのウィンドウの「HTML」タブのスクリーンショットを提供すると、さらに診断するのに役立ちます。

于 2012-07-20T17:11:49.877 に答える