html - IE低版本使用CSS或HTML水平对齐多个表格(6,7,8)

Question

我的代码适用于 IE 10 及更高版本，以及 Chrome 和 Firefox。但用户基本上都使用低版本的IE。除此之外，大部分代码都是为较低版本的 IE 构建的。因此，即使使用 IE 10，他们也必须使用兼容模式。我需要并排对齐多个表格。我正在使用代码生成 HTML 表格。所以它在一个网页中多次使用的控件中的同一个表。

在 IE10、chrome、firefox 中 - 显示属性设置为 Inline-Block 工作正常。但是它在兼容模式下没有被检测到。

任何建议都会有所帮助。

谢谢

下面给出的是测试代码，只是表格里面的内容发生了变化。我无法将我的 DIV 与其余代码一起插入。所以我在主 div block 周围放置了括号

{div id="scroll3"style="overflow-x:scroll; overflow-y:scroll; height:300px; white-space:nowrap;"}

    div style="width:auto;"
    table style="display:inline-block;">
    <tr>
    <td>
     <asp:Image ID="Image7" runat="server" ImageUrl="~/Images/7.jpg" />
    </td>
    </tr>
    </table>
    <table style=" width:500px; display:inline-block;">
    <tr>
    <td>

    <asp:Image ID="Image10" runat="server" ImageUrl="~/Images/10.jpg" />
    </td>
    </tr>
    </table>
    <table style="width:500px; display:inline-block;">
    <tr>
    <td>
    <asp:Image ID="Image8" runat="server" ImageUrl="~/Images/8.jpg" />
    </td>
    </tr>
    </table>
    <table style="width:500px;display:inline-block;">
    <tr>
    <td>
    <asp:Image ID="Image9" runat="server" ImageUrl="~/Images/9.jpg" />
    </td>
    </tr>
    </table>
    <table style="width:500px;display:inline-block;">
    <tr>
    <td>  &nbsp;&nbsp;&nbsp;
    <asp:Image ID="Image11" runat="server" ImageUrl="~/Images/11.jpg" />
    </td>
    </tr>
    </table>
    <table style="width:500px;display:inline-block;">
    <tr>
    <td >
    </td>
    </tr>
    </table>
     <table style="width:500px;display:inline-block;">
    <tr>
    <td>
    &nbsp;&nbsp;&nbsp;
    <asp:Image ID="Image12" runat="server" ImageUrl="~/Images/12.jpg" />
    </td>
    </tr>
    </table>
     <table style="width:500px;display:inline-block;">
    <tr>
    <td>

    &nbsp;&nbsp;&nbsp;
    <asp:Image ID="Image13" runat="server" ImageUrl="~/Images/13.jpg" />
    </td>
    </tr>
    </table>
     <table style="display:inline-block;">
    <tr>
    <td>

    &nbsp;&nbsp;&nbsp;
    <asp:Image ID="Image14" runat="server" ImageUrl="~/Images/14.jpg" />
    </td>
    </tr>
    </table>
     <table style="width:500px;display:inline-block;">
    <tr>
    <td>
     &nbsp;&nbsp;&nbsp;
    <asp:Image ID="Image15" runat="server" ImageUrl="~/Images/15.jpg" />
    </td>
    </tr>
    </table>

Answer 1

inline-block 不是适合表格的 display 属性。

使用 inline-table 来替代......现代浏览器。

然而，为了支持旧的，您可能需要使用 float:left，或者甚至是嵌套表(ewwww，我什至觉得这么建议……)让它像这样工作早在 IE6 时期。