このCSSデザインのどの部分がIEから離れていますか？

Question

免責事項：私は自分の頭でこの問題を何度も経験しましたが、疑いがあります。

私はCSSを使って2列のレイアウトを達成しようとしていましたが、左側の列はナビゲーション用で、垂直のナビゲーションは保持しません。右側の列はコンテンツ用です。コンテンツの長さは異なりますが、常に右側の列のナビゲーションよりも長くなります。私はまた、少なくとも優雅な劣化を目指しています< = IE7と私はそれを助けることができますJavaScriptがありません。

私はotherquestionsが幾分似たようなものを目指していることがわかりました。それは私がthis articleを見つけた方法でした。

私のデザインを適用しようとした後、私は働くと思ったものを考え出しました。ここ

jsfiddle：http://jsfiddle.net/FVsSV/2/

関連HTML：

<div id="mainCont"> 
    <div id="sidebar"> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit ag</a> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit a</a> 
     <a href="#">dapibus sit a</a> 
    </div> 
    <div id="content"> 
     <div id="padding-wrapper"> 
      <h1>uris et lorem gravida condiment</h1> 

      <h3 id="toc">apibus sit am</h3> 
       Content content content... 
     </div> 
    </div> 
    </div> 

関連するCSS：

#mainCont { 
    background-color: #000; 
    overflow: hidden; 
    padding-left: 148px; /* The width of the rail */ 
    height:1%; /* So IE plays nice */ 
} 



#sidebar { 
    display: inline; 
    background-color: #9BBCE4; 
    width: 148px; 
    float: left; 
    margin-left: -148px; 
} 


#sidebar a { 
    display: block; 
    padding: 15px 0px; 
    font-size: 1.1em; 
    text-align: center; 
    color: #2C2C2C; 
    text-decoration: none 
} 

#sidebar a:hover { 
    background-color: #4e88ce; 
    color: #FFFFFF; 
} 

#content{ 
    background-color: #FFFFFF; 
    width:100%; 
    border-left: 148px solid #9BBCE4; 
    margin-left:-148px; 
} 

#padding-wrapper { 
    padding: 30px 30px; 
} 

/* content formatting*/ 
#content h1 { 
    font-size: 1.5em; 
    margin: 15px 0px 20px 0px; 
} 

/* content formatting END*/

それはFF8とIE8でうまく見えますが、私はIE 7でそれを確認したときに"互換性のビュー"、それはかなり台無しに見えて、私は原因が何であるか、またはそれが簡単に修正することができますか分からない。

私が紛失していることは明らかですか、この方法はIE6-7との互換性を試す価値はありませんか？

Answer 1

これは、IE7が特定の幅と負のマージンをどのように処理するかと関係していると思います。私が間違っている場合は私を修正してください。しかし、IE7はIE6と同じボックスモデルの問題に苦しんでいませんが、それでもかなり正しくはありません。 （はに同じボックスモデルの問題がありますか？これは容器のパディングを設定するときに（padding-left:148pxと同じように）、IE7は間違ってに追加されます。子オブジェクトwidth:100%で子オブジェクトを設定すると、親によって提供されたスペースに収まり過ぎる子になります。 sidebar HTMLで最初に現れると浮かんで

、contentは、その周りを流れる必要がありますが、IE7はそれがコンテナの幅が広すぎだと思っているので、それが浮動オブジェクトの後の最初の行にそれを強制します。 @Scottは正しいです - content divのCSSルールからwidth:100%を削除すると、IE7で正しく流れます。 （私は個人的にこれをIE6で検証することはできません）

もちろん、これから学ぶべきことは、（IEの作業の頭痛を超えて）、マイナスのマージンがいくらか奇妙な動作を引き起こす可能性があります。ほとんどのシナリオでは回避されます。しかし、それは長い列の高さに一致する短い列の背景を持つ2列のレイアウトへのあなたのアプローチは面白いです。

Answer 2

width: 100%を#contentに削除するだけで、IE7（および他のブラウザ）でも正常に動作すると思います。