關於firefox和互聯網探索的內聯塊問題

Question

我在ie和firefox如何顯示內聯塊方面遇到困難。我也許應該指出的是，谷歌Chrome瀏覽器將其顯示爲意..發生在Firefox和IE

<div class="cell"> 
    <div><img src="images/dftg.jpg" /></div> 
    <p>Sean val</p> 
</div> 

的問題，當我在寫一段較長的名字上面，在上面parapgrah。在Firefox中，也就是說，單元格div向上移動，從而使佈局看起來很奇怪並且不一致。

.cell { 
    display: inline-block; 
    display:-moz-inline-stack; 
    border: 3px solid #ff0000; 
    padding: 7px; 
    height: 170px; 
    zoom: 1; 
    *display: inline; 
    _height: 170px; 

} 

.cell p { 
    padding: 10px 25px; 
    width: 150px; 
} 

Answer 1

您可能會遇到此問題，因爲您尚未指定任何vertical-align。

嘗試使用這樣的：

.cell { 
    display: inline-block; 
    vertical-align: top; 
    border: 3px solid #ff0000; 
    padding: 7px; 
    height: 170px; 
    zoom: 1; 
    *display: inline; 
    _height: 170px; 
} 

你可以忘掉display: -moz-inline-stack - 這是隻適用於Firefox 2，其中有非常，非常使用率較低。

您在「做研究」大概讀的文章是這樣的：

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

你或許應該再讀一遍，因爲它不使用vertical-align提及。

Answer 2

你應該檢查你閱讀的文章的日期。內聯塊自FF3以來一直受到支持。

在所有其他主流瀏覽器支持它（主要是）後，另一個不太明顯但很實用的新功能進入Firefox 3。當分配給元素時，內聯塊的顯示類型會導致元素被內聯定位（如跨度），但元素的內容被佈置爲就像該元素是塊一樣。

http://ajaxian.com/archives/soft-hyphens-and-inline-block-subtleties-in-firefox-3-rc-1

無論如何，看起來像你解決它。