带有子内联块和子显示的CSS div没有保持高度。

Question

<div>
    <div style="display:inline-block;">
        <div style="display:none"></div>
    </div>
</div>

我在试着理解这种内嵌块的行为。这是一个布局问题的简化版本，我在标题和菜单栏中遇到了一些响应性元素。如果中间div不是内联块，则整个嵌套块将没有高度(或者可见性，我不确定)。但是，如果中间div是一个内联块，它似乎没有显示最内部的子块(它在Firebug代码中是阴影的，所以我假设它是隐藏的)，但是父div保持某种默认高度。

我发现的最好的方法就是给外部div一条0或1 1px的线高，这也能说明默认高度来自哪里。它仍然显示出2-3 3px的高度，我可以接受我的特殊设计。然而，我可以想象这种工作不起作用的情况，所以看起来有点像黑客。

我想了解为什么这个特殊的结构是这样的。到目前为止，通过我的测试，它似乎是独一无二的，因为当它的孩子没有显示时，它不会崩溃。如果正确理解，这是错误还是嵌套显示交互方式的逻辑结果？有比线高更好的控制方法吗？它能不能被迫不显示高度呢？

我不感兴趣的JS解决方案，或解决方案，建议工作周围涉及避免内联块。将CSS添加到现有的拟议结构中是很好的。在我看来，最好的解决方案将不会显示结构的高度，而当显示没有设置为none时，对结构中显示的元素的影响最小。我的问题既是理论问题，也是现实问题。

Answer 1

是一个错误还是嵌套显示交互方式的逻辑结果？

内联元素(内联-块和内联-它们都重新创建您的问题)，在它们之后有空白。根据U+0020规范，这与单个空格的HTML字符具有相同的效果。这就是为什么你的父母有一个高度。

有比线高更好的方法来控制它吗？它能被强制显示一点高度吗？

这取决于，真的，你认为什么“更好”。您可以浮动‘中间’元素，而不是内联地显示它。(这可能要求您清除父元素中的浮点数-有一个常见的修复方法，称为清除修复)

下面的示例代码显示了此方法的有效性：

HTML：

<div class="parent">
    <div class="middle">
        <div class="final">asdf</div>
    </div>
</div>

CSS：

.middle{ float:left; }
.final{ display:none; }

/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }

/* Clearfix */
.parent:before,
.parent:after {
    content: " ";
    display: table;
}
.parent:after {
    clear: both;
}

实例：http://jsfiddle.net/16xp2m3L/2/