クロム（FirefoxとIEが良いです）

Question

これは私のHTMLページはFirefoxとIEで次のようになります。

そして、これはGoogle Chromeで同じページです：

HTMLコードは

<div id="container"> 

    <div id="header"> 
    <div id="navigation"> 
     <ul> 
     <li><a href="#">Info</a></li> 
     <li><a href="#">My menu</a></li> 
     <li><a href="#">Members</a></li> 
     <li><a href="#">Manage</a></li> 
     </ul> 
    </div> 
    </div> 

    <div id="sidebar"></div> 

    <div id="content"> 
    <div id="articles-overflow"> 
     <div id="articles-strip"> 

     <div class="article-month-column"> 
      <div class="article"> 
      <div> 
       <h1>Article 1.1</h1> 
       <p> 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       </p> 
      </div> 
      </div> 
      <div class="article"> 
      <div> 
       <h1>Article 1.2</h1> 
       <p> 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       </p> 
      </div> 
      </div> 
     </div> 

     <div class="article-month-column"> 
      <div class="article"> 
      <div> 
       <h1>Article 2</h1> 
       <p> 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       This is some idiotic text. 
       </p> 
      </div> 
      </div> 
     </div> 

     <div class="article-month-column"></div> 
     <div class="article-month-column"></div> 
     <div class="article-month-column"></div> 

     </div> 
    </div> 
    </div> 

    <div id="footer"></div> 

</div> 

ここに、赤、黄、紫、白と緑のコンテナのCSSがあります。

#sidebar { 
    float: left; 
    width: 180px; 
    height: 200px; 
    background: blue; 
} 

#content { 
    overflow: auto; 
    display: block; 
    background: red; 
} 

#articles-overflow { 
    margin: 10px 5px; 
    overflow: auto; 
    display: block; 
    background: yellow; 
} 

#articles-strip { 
    white-space: nowrap; 
} 

.article-month-column { 
    width: 224px; 
    height: 450px; 
    margin-right: 15px; 
    background: darkviolet; 
    display: inline-block; 
    overflow: auto; 
    white-space: normal; 
} 

.article { 
    display: block; 
    clear: both; 
    margin: 0px 5px 10px 0px; 
    padding: 10px; 
    background: white; 
    border-radius: 5px; 
} 

p { 
    padding: 0px 7px 0px 0px; 
    margin: 0px 0px 1em 0px; 
    font-size: 7.5pt; 
    text-align: justify; 
    background: green; 
} 

これを修正する方法はありますか？私はこれで苦労していますが、なぜGoogle Chromeがこのような奇妙な方法でページレイアウトをレンダリングするのかを理解できません。どんな助けでも大歓迎です。ありがとうございました。

Answer 1

inline-block要素にはvertical-alignを指定するだけです。

また、IEの古いバージョンでインラインブロックを使用する場合には、少し余分なCSSが必要です。

.article-month-column { 
    width: 224px; 
    height: 450px; 
    margin-right: 15px; 
    background: darkviolet; 
    display: inline-block; 
    overflow: auto; 
    white-space: normal; 
    vertical-align:top; 

    /*For IE*/ 
    *display: inline; 
    zoom:1; 
}