0

これは私のHTMLページがFirefoxとIEでどのように見えるかです： FirefoxとIEのページレイアウト

そしてこれはGoogleChromeの同じページです： GoogleChromeのページレイアウト

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;
}

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

4

1 に答える 1

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;
}
于 2012-04-16T23:57:35.830 に答える