1

1つのページに3つの均等なサイズのDIVを表示しようとしています。左右のDIVはそれぞれ左右に配置され、中央のDIVは中央に配置され、それらの間のスペースは均等になっています。私はこの答えを見つけました。これは私が望んでいることを正確に実行し、完全に機能します。

完璧に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;
}
4

2 に答える 2

1

Internet Explorerで、互換表示設定を開き（[ツール]からこれを選択できるようにコマンドメニューを有効にする必要がありました）、[互換表示でイントラネットサイトを表示する]オプションのチェックを外しました。その後、私のページは正しく表示されました。

于 2013-02-13T11:49:54.120 に答える
0

ページで特定のDocTypeを実行していますか？XHTML Transitional 1.0 doctypeに移行すると、すべてのブラウザーでほとんどのものを同じ、またははるかに近くレンダリングするのに役立つことがわかりました。

于 2013-02-05T18:21:03.847 に答える