Chrome呈现奇怪的CSS布局（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;
}

拜托，有什么方法可以解决这个问题吗？我现在一直在努力解决这个问题，我简直无法理解为什么谷歌Chrome以这种奇怪的方式呈现页面布局。任何帮助是极大的赞赏。谢谢。

Answer 1

您只需为vertical-align元素指定inline-block。

此外，在旧版本的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;
}