Chrome的渲染奇數CSS佈局（Firefox和IE都不錯）

這是我的HTML頁面的樣子在Firefox和IE： Page layout in Firefox and IE Chrome的渲染奇數CSS佈局（Firefox和IE都不錯）

這是谷歌瀏覽器在同一頁： Page layout in 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會以這種奇怪的方式呈現頁面佈局。任何幫助是極大的讚賞。謝謝。

來源

2012-04-16 Boris

的[爲什麼嵌套在塊元件數直列塊的innerHTML影響內聯塊的定位？]（可能重複http://stackoverflow.com/questions/9404529 /爲什麼要做幾個內嵌塊嵌套在一個塊元素的影響） – thirtydot 2012-04-16 23:55:46

添加'vertical-align：top'你有'display：inline-block'。 – thirtydot 2012-04-16 23:56:13

只需添加float：留給.article類 – Paradise 2012-04-16 23:57:13

您只需要爲那些inline-block元素指定vertical-align。

另外，當使用inline-block for 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-16 23:57:35

Chrome的渲染奇數CSS佈局（Firefox和IE都不錯）

回答

相關問題