html - Chrome 渲染奇怪的 CSS 布局（Firefox 和 IE 都不错）

Question

这是我的 HTML 页面在 Firefox 和 IE 中的样子：

这是谷歌浏览器中的同一页面：

这是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

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

此外，在为旧版本的 IE 使用 inline-block 时，您应该拥有一些额外的 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;
}