时间戳

首页 > 解决方案 > 如何使“适合内容”跨浏览器工作？

html - 如何使“适合内容”跨浏览器工作？

问题描述

我有这个简单的网格设置，其中单元格是<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;
}

（这里是在 CodePen 上）

它在 Chrome 上按预期工作——“文本内容”段落“拥抱”内容并保持小于 200 像素（由<img>'s.my类决定）。但是，在 Firefox 上，它停止工作——段落高度为 200px，就好像没有-moz-fit-content提供一样。

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

标签： htmlcsslayoutcss-grid

解决方案

删除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;
}
<div class="wrapper">
  <p>Text Content</p>
  <p>
    <img class="my" src="https://i.imgur.com/Spk75ST.jpg" />
  </p>
</div>

推荐阅读