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。

Answer 2

您应该查看您阅读的文章的日期。自FF3以来一直支持内联块。

在所有其他主流浏览器支持它（主要是）后，另一个模糊但有用的新功能进入Firefox 3是内联块。当分配给元素时，内联块的显示类型会使元素内联（如跨度），但元素的内容布局就像元素是块一样。

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

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

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

2 个答案: