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都不错）

回答

相关问题