0

我遇到的问题是我的网站在同一会话的不同阶段显示不同。以下是页面在 PageLoad 上的显示方式：

在此处输入图像描述

该表填充了一些数据，并且所有空字段都是用于用户输入的 DropDownLists。请注意，表格居中，包含 DropDownLists 的字段都具有相同的宽度。

以下是保存一些用户输入后页面的显示方式：

在此处输入图像描述

DropDownLists 已全部替换为已选择的图像（可能没有），但现在表格未居中，每个表格都缺少右侧边框，右侧列中的第 3 和第 4 个表格具有任意宽度的字段包含 DropDownLists，即使这些都是 class=image 并且应该具有 75px 的固定宽度。

这是相关的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 回答