在Firefox中CSS高度100％无法正常工作 [英] CSS height 100% in firefox not working

问题描述

我有以下HTML和CSS，在Firefox和Chrome中表现完全不同。

JSFiddle 。

.container {width：200px; height：50px;边框：1px纯黑色; display：inline-table;}。content {background-color：red;宽度：30％; height：100％;}

< div class =容器> < div class =content>< / div>< / div>< div class =container> < div class =content>< / div>< / div>

在Chrome中，它可以正确显示，但不能在Firefox中显示。



Chrome：



Firefox：

通过检查Firefox中的内容div，高度为0.

为什么它可以在Chrome和Safari中使用，但不能在Firefox中使用？
我注意到，删除 display：inline-table 将会工作，但是容器div将被堆叠而不是内联。 $ c> display：inline-block; 。

I have the following HTML and CSS that behaves totally different in Firefox and Chrome.

JSFiddle.

.container {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: inline-table;
}

.content {
  background-color: red;
  width: 30%;
  height: 100%;
}

<div class="container">
    <div class="content"></div>
</div>
<div class="container">
    <div class="content"></div>
</div>

In Chrome it displays correctly but not in Firefox.

Chrome:

Firefox:

By inspecting the content div in Firefox, the height is 0.

Why does it work in Chrome and Safari, but not in Firefox? I notice that removing the display: inline-table will work but the container div will be stacked instead of inline.

解决方案

Try changing display: inline-table; to display: inline-block;.

这篇关于在Firefox中CSS高度100％无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！