Question

我试图在页面上显示三个大小均匀的DIV，左右DIV分别左右对齐，中间的DIV居中，两者之间的间距均匀。我找到this answer，它完全符合我的要求并且完美无缺。

完全适用于Chrome和Firefox，即。在IE9（在Windows 7上）和IE10（在Windows 8上），它看起来有点不同，盒子堆叠而不是并排，CSS中指定的盒子的宽度和高度完全被忽略，并且随着控件的进入第一个DIV看似每个人都在自己的DIV中有边框，而不是在同一个DIV中。谁能告诉我我（或IE）出错的地方？

HTML

<div id="caselookup">
    <div class="box">
        <div class="boxcontent">
            <asp:TextBox ID="txtCaseNo" runat="server" /><br />
            <asp:Button ID="btnLookupCaseNo" runat="server" Text="Lookup Case" />
        </div>
    </div>
    <div class="box">
        <div class="boxcontent">
            <asp:ListBox ID="lstUnmatchedAppointments" runat="server"  />
        </div>
    </div> 
    <div class="box"> 
        <div class="boxcontent">
            <asp:Button ID="btnContinue" runat="server" Text="New Colic Record" />
        </div>     
    </div> 
    <span class="stretch"></span>
</div>

CSS

#caselookup
{
    text-align: justify;
}
.box
{
    vertical-align: top;
    display: inline-block;
    *display: inline;
    text-align: center;
    min-width: 30%;
    border: 1px solid black;        
    height: 200px;
}
.boxcontent
{
    padding:10px;
}
.stretch
{
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

Answer 1

在Internet Explorer中，我打开了兼容性视图设置（我必须启用命令菜单，以便我可以从工具中选择此项），然后取消选中“在兼容性视图中显示Intranet站点”选项。之后我的页面显示正确。

Answer 2

您是否在页面中运行特定的DocType？我发现转到XHTML Transitional 1.0 doctypes有助于在所有浏览器中渲染大多数相同或更接近的内容。

IE9 +中内联DIV显示不正确

2 个答案: