css - 使一些 HTML 元素在与内联父级内的内联元素混合时表现为 'block'

Question

我试图让一个 div 的显示属性设置为 inline(或者 inline-block，如果我想要一个边距)以在 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>

显然，我不希望元素或元素容器的宽度或高度固定，因为它们可以包含嵌套内容，这会增加所需的空间量(例如，想象另一个分数内的一个分数)，同样地，如果我希望静态文本“元素”的宽度刚好足以在一行中包含文本，即内联。

我认为的问题是很难避免将 block 元素放入我的内联“item”/“item-container”元素中，例如 <hr>在分数中，或者如果我想说一个“元素”顶部的菜单栏，它在计算了元素内容的其余部分的宽度后使用整个宽度。我知道将实际的 block 项放入内联项是无效的语法，尽管将 block 元素的 display 属性设置为 inline 或 inline-block 至少可以使事情在 Firefox/Chrome 中正常运行。但遗憾的是，在 IE 中不行。

是否有适当的修复？

编辑:我实际上对“item”和“item-container”使用了内联 block (使用适当的 IE hack)来让它在 Firefox 等中正常工作，但 IE 仍然将它们视为内联，随后被转换成 block ，因为它的一个 child 是一个 block 。

Answer 1

不要使用 <hr> .您可以使用 text-decoration: underline 画一条线或使用底部边框或使用图像(例如，拉伸(stretch)到所需宽度的单像素图​​像)。然后您可以使用内联元素。