CSSの単純なフロートIE互換性モードで問題を左に左

StackOverflow https://stackoverflow.com/questions/4792859

質問

私は2つのボックスを並べて取得しようとしています（残りの200pxのメニューとその隣に残り100％の幅のメインコンテンツ領域）。

すべてのブラウザでは正常に動作しますが、多くのクライアントがIE6を使用しています（残念ながら、私たちはそれについてできることは何もありません）。これはIE互換性モードをサポートする必要があります。残念ながら、この単純なCSSは機能しません！誰もが私がテーブルに戻る必要がなくても私を助けることができますか？

関連するCSS：

.clear {
    clear:both;
}

/* Left menu */
.leftMenu{
    width: 200px;
    border:1px solid green;
    height:100px;
    float:left;
}

/* Main Content area */
.mainBox{
    width:100%;
    border:1px solid red;
}
.mainWrapper{
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>



</title><link rel="stylesheet" type="text/css" href="css/default.css" /></head>



<body>

    <form name="form1" method="post" action="default.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTIwNjAyODU4M2Rk5phxJ78Kc9Kf0nXvcJ7j7tQJPxw=" />

</div>

    <div class="mainWrapper">

        <div class="leftMenu">

        left

        </div>

        <div class="mainBox">

        main

        </div>

        <div class="clear"></div>

    </div>



    </form>

</body>

</html>
役に立ちましたか？

解決

IE6を持っていないので、テストすることはできませんが、とにかく。削除してみてください width: 100% から .mainBox また、すべての境界線を削除し、代わりにテストに背景色を使用します。 IE7基準でそのように機能するようにしました。

.mainBox フロートがないDIVなので、暗黙的に100％幅です。また、境界線 追加 幅には、テスト中に予期しない動作を引き起こす可能性があります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top