1

我试图在页面上显示三个大小均匀的 DIV，左右 DIV 分别左右对齐，中间的 DIV 居中，它们之间的空间均匀。我找到了这个答案，这正是我想要的并且完美地工作。

完美地在 Chrome 和 Firefox 中，就是这样。在 IE9（在 Windows 7 上）和 IE10（在 Windows 8 上）它看起来完全不同，盒子堆叠而不是并排，CSS 中指定的盒子的宽度和高度完全被忽略了，奇怪的是，控件在第一个DIV 貌似每个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;
}
4

2 回答 2

1

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

于 2013-02-13T11:49:54.120 回答
0

您是否在页面中运行特定的 DocType？我发现使用 XHTML Transitional 1.0 文档类型有助于在所有浏览器中以相同或更接近的方式呈现大多数内容。

于 2013-02-05T18:21:03.847 回答