Question

我有一个简单的网格设置，其中单元格是<p>元素（注意：必须保持这种方式）：

<div class="wrapper">
  <p>Text Content</p>
  <p>
    <img class="my" src="http://www.stuff.co.nz/etc/designs/ffx/nz/stuff/social-media-logos/stuff-200x200.png"/>
  </p>
</div>

CSS：

.wrapper {
  display: grid;
  grid-template-columns: 220px 220px;
  background-color: #fff;
  grid-gap: 10px;
  text-align: center;
}

.wrapper p {
  height: fit-content;
  height: -moz-fit-content;
  border-color: black;
  border: solid;
  border-width: 0.5px;
}

.my {
  height: 200px;
}

（here it is on the CodePen）

它可以在Chrome上正常工作-“文本内容”段落“拥抱”内容并保持小于200像素（由<img>的{{1}}类决定）。但是，在Firefox上，它停止工作-段落高度为200px，就像没有提供.my一样。

如何使此代码在Firefox中的行为与在Chrome中类似？

Answer 1

删除网格项上的static void MX_TIM10_Init(void) { htim10.Instance = TIM10; htim10.Init.Prescaler = 35999; htim10.Init.CounterMode = TIM_COUNTERMODE_UP; htim10.Init.Period = 60000; htim10.Init.ClockDivision = TIM_CLOCKDIVISION_DIV2; //TIM_CLOCKDIVISION_DIV1 if (HAL_TIM_Base_Init(&htim10) != HAL_OK) { Error_Handler(); } }并将height（默认为align-items: start;）添加到网格容器中。

stretch

.wrapper {
  display: grid;
  grid-template-columns: 220px 220px;
  align-items: start; /* NEW */
  background-color: #fff;
  grid-gap: 10px;
  text-align: center;
}

.wrapper p {
  border-color: red;
  border: solid;
  border-width: 0.5px;
}

.my {
  height: 200px;
}

如何使“适合内容”在所有浏览器中都能正常工作？

1 个答案: