关于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

无论如何，看起来像你解决它。