CSS `width: max-content` 在 Firefox 中无法正常工作

Question

我有一个图像容器，它应该根据图像的宽度调整自身大小，但它在 Firefox 中无法正确调整自身大小，它在 Chrome 中完美运行，但在 Firefox 中图像周围有一些空间，我已经设置了图像\的高度设置为100%，使其占据容器的所有高度。

\n

\r\n

\r\n

* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.container {\n  width: 899px;\n  height: 500px;\n  padding: 1rem;\n  gap: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #303030;\n}\n\n.card {\n  height: 100%;\n  width: 100%;\n  background-color: #202020;\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.section-heading {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-transform: uppercase;\n}\n\n.section-heading>h2 {\n  font-weight: 500;\n  letter-spacing: 1px;\n  font-size: 1rem;\n}\n\n.section-heading a {\n  text-decoration: none;\n  transition: 0.1s all linear;\n}\n\n.section-heading>a {\n  font-size: 0.8rem;\n  letter-spacing: 1px;\n  font-weight: 500;\n}\n\n.section-heading a:hover {\n  color: var(--theming);\n}\n\n.trending.card {\n  display: flex;\n  position: relative;\n  padding: 1rem;\n  gap: 0.5rem;\n}\n\n.cover-container {\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  background-size: cover;\n  background-position: center;\n  transition: 0.1s all linear;\n  background-color: red;\n}\n\n.cover-container:hover {\n  filter: brightness(0.7);\n}\n\n.cover {\n  width: 100%;\n  background-color: var(--same-background);\n  opacity: 0;\n  transition: 0.2s all linear;\n}\n\n.title a {\n  text-decoration: none;\n  transition: 0.1s all linear;\n}\n\n.title a:hover {\n  color: var(--theming);\n}\n\n.genres {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  overflow-x: auto;\n  scrollbar-width: none;\n  flex-shrink: 0;\n}\n\n.genre {\n  padding: 0.1rem 0.5rem;\n  text-decoration: none;\n  border-radius: 5px;\n  background-color: #404040;\n  transition: 0.1s all linear;\n  color: var(--secondary-color);\n}\n\n.genre:hover {\n  background-color: var(--primary-background);\n}\n\n.genre:active {\n  background-color: var(--lighter-background);\n}\n\n.trending.banner {\n  height: 30%;\n  width: 100%;\n  background-color: var(--same-background);\n  position: absolute;\n  align-self: flex-start;\n  z-index: 0;\n  background-size: cover;\n  background-position: center;\n  filter: brightness(0.5);\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  transition: 0.2s all linear;\n}\n\n.trending.cover-container {\n  height: 100%;\n  width: max-content;\n  max-width: 40%;\n  z-index: 3;\n  border-radius: 10px;\n  flex-shrink: 0;\n  border-radius: 10px;\n}\n\n.trending.manga.cover {\n  height: 100%;\n  width: auto;\n}\n\n.trending.info {\n  width: 100%;\n  height: 71%;\n  align-self: flex-end;\n  padding: 0.5rem;\n  gap: 0.1rem;\n  display: flex;\n  flex-direction: column;\n}\n\n.trending.title {\n  font-weight: 500;\n  font-size: 1.5rem;\n  flex-shrink: 0;\n}\n\n.trending.description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  -webkit-line-clamp: 6;\n  flex-shrink: 0;\n  color: var(--secondary-color);\n}\n\n.trending.actions {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: flex-end;\n  gap: 0.5rem;\n}\n\n.trending.action {\n  height: 2rem;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-decoration: none;\n  background-color: var(--same-background);\n  border-radius: 5px;\n  border: none;\n  transition: 0.1s all linear;\n  cursor: pointer;\n  color: var(--secondary-color);\n}\n\n.nav {\n  width: 2.5rem !important;\n}\n\n.nav-icon {\n  height: 100%;\n}\n\n.nav-icon path {\n  stroke: var(--secondary-color);\n  stroke-width: 1.5;\n}\n\n.trending.action:hover {\n  background-color: var(--primary-background);\n}\n\n.trending.action:active {\n  background-color: var(--lighter-background);\n}

\r\n

<div class="trending container">\n  <div class="trending section-heading">\n    <h2><a href="#">Trending Now</a></h2>\n    <a href="#">View All</a>\n  </div>\n  <div class="trending card" id="1">\n    <div class="trending banner">\n      <img src="https://s4.anilist.co/file/anilistcdn/media/manga/banner/117195-VVYq1EEOwR0K.jpg" alt="" class="trending cover" loading="lazy" style="opacity: 1;">\n    </div>\n    <a href="/manga/117195" class="trending cover-container">\n      <img src="https://s4.anilist.co/file/anilistcdn/media/manga/cover/large/bx117195-r3kf8eF0xkDJ.png" alt="" class="trending manga cover" loading="lazy" style="opacity: 1;">\n    </a>\n    <div class="trending info">\n      <h3 class="trending title"><a href="/manga/117195">[Oshi no Ko]</a></h3>\n      <div class="genres">\n\n        <a href="/search/manga/Drama" class="trending genre">Drama</a>\n\n        <a href="/search/manga/Mystery" class="trending genre">Mystery</a>\n\n        <a href="/search/manga/Psychological" class="trending genre">Psychological</a>\n\n        <a href="/search/manga/Supernatural" class="trending genre">Supernatural</a>\n\n      </div>\n      <p class="trending description">Gorou is a gynecologist and idol fan who\xe2\x80\x99s in shock after his favorite star, Ai, announces an impromptu hiatus. Little does Gorou realize that he\xe2\x80\x99s about to forge a bond with her that defies all common sense! Lies are an idol\xe2\x80\x99s weapon! (Source:\n        Yen Press)</p>\n      <div class="trending actions">\n        <a href="/manga/117195/read" class="trending action read">Read this Manga</a>\n        <button class="trending action nav previous">\n           <svg class="nav-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1, 0, 0, 1, 0, 0)">\n             <g id="SVGRepo_bgCarrier" stroke-width="0"></g>\n             <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>\n             <g id="SVGRepo_iconCarrier">\n               <g id="Arrow / Arrow_Right_SM">\n                 <path id="Vector" d="M7 12H17M17 12L13 8M17 12L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>\n               </g>\n             </g>\n           </svg>\n         </button>\n        <button class="trending action nav next">\n           <svg class="nav-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n             <g id="SVGRepo_bgCarrier" stroke-width="0"></g>\n             <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>\n             <g id="SVGRepo_iconCarrier">\n               <g id="Arrow / Arrow_Right_SM">\n                 <path id="Vector" d="M7 12H17M17 12L13 8M17 12L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>\n               </g>\n             </g>\n           </svg>\n         </button>\n      </div>\n    </div>\n  </div>\n</div>

\r\n

\r\n

\r\n

\n

这是代码，.trending.container应该占据内部图像的宽度，但是图像的左侧和右侧有一些额外的空间，这个额外的空间仅在 Firefox 中可见，并且 的宽度仅与.trending.container图像一样宽在 chrome 中，并且按我的预期工作。请帮忙，谢谢。JSFiddle

\n

Answer 1

解决方法摘要

\n

我发现应用display: contents周围的锚标记 ( .trending.cover-container)，然后将重要的视觉样式向下移动到图像本身 ( .trending.manga.cover) 似乎可以解决 Chrome 和 Firefox 中的问题。

\n

解释

\n

由于百分比宽度/高度在 CSS 中的工作方式，图像周围的这种额外间距极难删除。基本上，当指定百分比高度时：

\n

\n
• 百分比是根据生成的盒子的包含块的高度计算的。\n
  \n
  • “包含块”由父块级元素或创建新格式化上下文的最近元素（例如 Flex 或网格容器）来标识。
  \n
  \n
\n
• 如果未明确指定包含块的高度，则该值计算为auto。
\n

\n

来源 MDN

\n

现在，我不是浏览器实现方面的专家，但我希望 Chrome 与 Firefox 对“明确”一词的解释方式产生差异。在摆弄 CSS 时，我发现如果我在层次结构中应用足够的硬编码像素尺寸，额外的间距在 Chrome 和 Firefox 上都会消失。但是，当然，所有这些硬编码都会导致无法维护的样式表。

\n

作为替代方案，我发现display: contents按照上述方式进行应用似乎可以以相当不干扰的方式解决该问题。请参阅下面的片段。您可能可以删除一些因此更改而变得不必要的样式，但我只做了必要的修改。

\n

\r\n

\r\n

* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n.container {\n  width: 899px;\n  height: 500px;\n  padding: 1rem;\n  gap: 0.5rem;\n  display: flex;\n  flex-direction: column;\n  background-color: #303030;\n}\n\n.card {\n  height: 100%;\n  width: 100%;\n  background-color: #202020;\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n.section-heading {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  text-transform: uppercase;\n}\n\n.section-heading>h2 {\n  font-weight: 500;\n  letter-spacing: 1px;\n  font-size: 1rem;\n}\n\n.section-heading a {\n  text-decoration: none;\n  transition: 0.1s all linear;\n}\n\n.section-heading>a {\n  font-size: 0.8rem;\n  letter-spacing: 1px;\n  font-weight: 500;\n}\n\n.section-heading a:hover {\n  color: var(--theming);\n}\n\n.trending.card {\n  display: flex;\n  position: relative;\n  padding: 1rem;\n  gap: 0.5rem;\n}\n\n.cover-container {\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  background-size: cover;\n  background-position: center;\n  transition: 0.1s all linear;\n  background-color: red;\n}\n\n.cover-container .cover:hover {\n  filter: brightness(0.7);\n}\n\n.cover {\n  width: 100%;\n  background-color: var(--same-background);\n  opacity: 0;\n  transition: 0.2s all linear;\n}\n\n.title a {\n  text-decoration: none;\n  transition: 0.1s all linear;\n}\n\n.title a:hover {\n  color: var(--theming);\n}\n\n.genres {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  overflow-x: auto;\n  scrollbar-width: none;\n  flex-shrink: 0;\n}\n\n.genre {\n  padding: 0.1rem 0.5rem;\n  text-decoration: none;\n  border-radius: 5px;\n  background-color: #404040;\n  transition: 0.1s all linear;\n  color: var(--secondary-color);\n}\n\n.genre:hover {\n  background-color: var(--primary-background);\n}\n\n.genre:active {\n  background-color: var(--lighter-background);\n}\n\n.trending.banner {\n  height: 30%;\n  width: 100%;\n  background-color: var(--same-background);\n  position: absolute;\n  align-self: flex-start;\n  z-index: 0;\n  background-size: cover;\n  background-position: center;\n  filter: brightness(0.5);\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  transition: 0.2s all linear;\n}\n\n.trending.cover-container {\n  display: contents;\n  height: 100%;\n  width: max-content;\n  max-width: 40%;\n  flex-shrink: 0;\n}\n\n.trending.manga.cover {\n  border-radius: 10px;\n  z-index: 3;\n  height: 100%;\n  width: auto;\n}\n\n.trending.info {\n  width: 100%;\n  height: 71%;\n  align-self: flex-end;\n  padding: 0.5rem;\n  gap: 0.1rem;\n  display: flex;\n  flex-direction: column;\n}\n\n.trending.title {\n  font-weight: 500;\n  font-size: 1.5rem;\n  flex-shrink: 0;\n}\n\n.trending.description {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  -webkit-line-clamp: 6;\n  flex-shrink: 0;\n  color: var(--secondary-color);\n}\n\n.trending.actions {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: flex-end;\n  gap: 0.5rem;\n}\n\n.trending.action {\n  height: 2rem;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-decoration: none;\n  background-color: var(--same-background);\n  border-radius: 5px;\n  border: none;\n  transition: 0.1s all linear;\n  cursor: pointer;\n  color: var(--secondary-color);\n}\n\n.nav {\n  width: 2.5rem !important;\n}\n\n.nav-icon {\n  height: 100%;\n}\n\n.nav-icon path {\n  stroke: var(--secondary-color);\n  stroke-width: 1.5;\n}\n\n.trending.action:hover {\n  background-color: var(--primary-background);\n}\n\n.trending.action:active {\n  background-color: var(--lighter-background);\n}

\r\n

<div class="trending container">\n  <div class="trending section-heading">\n    <h2><a href="#">Trending Now</a></h2>\n    <a href="#">View All</a>\n  </div>\n  <div class="trending card" id="1">\n    <div class="trending banner">\n      <img src="//dummyimage.com/1500x500" alt="" class="trending cover" loading="lazy" style="opacity: 1;">\n    </div>\n    <a href="/manga/117195" class="trending cover-container">\n      <img src="//dummyimage.com/300x450" alt="" class="trending manga cover" loading="lazy" style="opacity: 1;">\n    </a>\n    <div class="trending info">\n      <h3 class="trending title"><a href="/manga/117195">[Oshi no Ko]</a></h3>\n      <div class="genres">\n\n        <a href="/search/manga/Drama" class="trending genre">Drama</a>\n\n        <a href="/search/manga/Mystery" class="trending genre">Mystery</a>\n\n        <a href="/search/manga/Psychological" class="trending genre">Psychological</a>\n\n        <a href="/search/manga/Supernatural" class="trending genre">Supernatural</a>\n\n      </div>\n      <p class="trending description">Gorou is a gynecologist and idol fan who\xe2\x80\x99s in shock after his favorite star, Ai, announces an impromptu hiatus. Little does Gorou realize that he\xe2\x80\x99s about to forge a bond with her that defies all common sense! Lies are an idol\xe2\x80\x99s weapon! (Source:\n        Yen Press)</p>\n      <div class="trending actions">\n        <a href="/manga/117195/read" class="trending action read">Read this Manga</a>\n        <button class="trending action nav previous">\n           <svg class="nav-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" transform="matrix(-1, 0, 0, 1, 0, 0)">\n             <g id="SVGRepo_bgCarrier" stroke-width="0"></g>\n             <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>\n             <g id="SVGRepo_iconCarrier">\n               <g id="Arrow / Arrow_Right_SM">\n                 <path id="Vector" d="M7 12H17M17 12L13 8M17 12L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>\n               </g>\n             </g>\n           </svg>\n         </button>\n        <button class="trending action nav next">\n           <svg class="nav-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n             <g id="SVGRepo_bgCarrier" stroke-width="0"></g>\n             <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>\n             <g id="SVGRepo_iconCarrier">\n               <g id="Arrow / Arrow_Right_SM">\n                 <path id="Vector" d="M7 12H17M17 12L13 8M17 12L13 16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>\n               </g>\n             </g>\n           </svg>\n         </button>\n      </div>\n    </div>\n  </div>\n</div>

\r\n

\r\n

\r\n

\n