使某些 HTML 元素表现为“块”；与内联父级内的内联元素混合时的情况

Question

我试图让一个 div 的显示属性设置为内联（或内联块，如果我想要边距），以便在 IE 中正确运行（在大多数其他浏览器中也是如此）。 我的情况是这样的 - 想象一个工作区，其中项目容器包含以水平方式布局的内联项目。这些项目可以容纳文本或图像等内容，但也可以是复合类型，例如“分数”，其分子和分母本身就是项目容器，包含更多水平项目。

例如，我可能有 HTML：

<div class='item-container'>
    <div id='statictext' class='item'>x = </div>

    <div id='fraction' class='item'>
        <div id='numerator' class='item-container'>...</div>
        <hr/>
        <div id='denominator' class='item-container'>...</div>
    </div>
</div>

显然，我不希望项目或项目容器具有固定的宽度或高度，因为它们可以包含嵌套内容，这将增加所需的空间量（例如，想象另一个项目中的一个分数）分数），类似地，如果我希望静态文本“项目”的宽度足够大以包含一行文本（即内联）。

我认为的问题是，很难避免将块元素放入内联“item”/“item-container”元素中，例如分数中的

---

，或者如果我想说“项目”顶部的菜单栏，在计算出项目其余内容的宽度后使用整个宽度。 我知道将实际的块项放入内联项中是无效的语法，尽管将块元素的显示属性设置为 inline 或 inline-block 至少可以在 Firefox/Chrome 中正常运行。但可惜，在 IE 中不行。

有足够的修复吗？

编辑：我实际上对“item”和“item-container”使用了 inline-block （带有适当的 IE hack），以使其在 Firefox 等中正常工作，但 IE 仍然将它们视为内联，然后将其转换为块，因为它的子级之一是块。

Answer 1

不要使用

---

。您可以使用 text-decoration: underline 或使用底部边框或使用图像（例如，拉伸到所需宽度的单像素图​​像）来绘制线条。然后您就可以使用内联元素。