firefox和Internet探索上的内联块问题

Question

关于ie和firefox如何显示内联块,我遇到了困难.我应该指出Google Chrome会按预期显示它.

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

问题出现在firefox中,即当我在上面的段落中写了一个更长的名字时,在上面的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.