Flex内部的flex Flex在Firefox 38中工作

Question

我尝试在Firefox中使用TextBox1.Visible = False，它可以在Chrome中运行，它就像一个魅力！ 这是Firefox中的结果：

以下是Chrome / Opera的外观（应该看）：

有什么问题？

这是CSS，它在Firefox上的工作：

flex

Answer 1

问题是.jaw是弹性项目，您使用

.jaw {
  padding-top: 2%;
  padding-bottom: 5%;
}

在CSS 2.1中，padding中的百分比被指定为

  

百分比是根据 width 计算的   生成的框containing block，即使是'padding-top'和'padding-bottom'。

但是，在Flexible Box Layout Module中，

  

始终解决flex items上的百分比边距和填充   违背各自的规模;与块不同，它们并不总是如此   解决其包含块的内联维度。

因此，Firefox会尝试解析与Flex容器的 height 相关的百分比。但是这个高度是auto，也就是说，它取决于内容的高度，包括垂直填充。这是一个循环定义，因此填充计算为0。

但Chrome不同意，并解决了与Flex容器宽度相关的百分比。该规范警告说：

  

注意：此行为为currently disputed，可能会更改为   此规范的未来版本以匹配块的行为。

由于您似乎没有使用flex，因此可以删除

.jawcontain {
  display: flex;
}

然后，.jaw将不再是弹性项目，并且将根据包含块的宽度解析填充。