Flexbox 不能在带有 Next.js 图像的 safari 中工作答案

【问题标题】：Flexbox not working in safari with Next.js ImagesFlexbox 不能在带有 Next.js 图像的 safari 中工作
【发布时间】：2022-01-15 08:25:19
【问题描述】：

我想布置带有flex-wrap 的 Next.js 图像，其高度固定，但宽度取决于图像。我正在使用顺风。

我已经让它在谷歌浏览器上完美运行。

但是，当我在 Safari 上查看时，它似乎在图像周围创建了额外的空间。如何解决 Safari 上的 Flex 问题，使其像 Google Chrome 一样显示？

索引.js

<div className="grid grid-cols-2 gap-8 md:flex md:flex-1 md:flex-wrap md:flex-row">
    <div className="relative h-96 bg-red-100">  
        <div className="h-full ck-product-image-container">
            <Image className="_image" src="" layout="fill" objectFit="contain"  />  
        </div>
    </div>
    <div className="relative h-96 bg-red-100">  
        <div className="h-full ck-product-image-container">
            <Image className="_image" src="" layout="fill" objectFit="contain"  />  
        </div>
    </div>
    <div className="relative h-96 bg-red-100">  
        <div className="h-full ck-product-image-container">
            <Image className="_image" src="" layout="fill" objectFit="contain"  />  
        </div>
    </div>
    <div className="relative h-96 bg-red-100">  
        <div className="h-full ck-product-image-container">
            <Image className="_image" src="" layout="fill" objectFit="contain"  />  
        </div>
    </div>
    <div className="relative h-96 bg-red-100">  
        <div className="h-full ck-product-image-container">
            <Image className="_image" src="" layout="fill" objectFit="contain"  />  
        </div>
    </div>
    <div className="relative h-96 bg-red-100">  
        <div className="h-full ck-product-image-container">
            <Image className="_image" src="" layout="fill" objectFit="contain"  />  
        </div>
    </div>
</div>

CSS 主要在顺风中处理，但是我不得不写一些来定位 Next.js Image 属性。

app.css

.ck-product-image-container > span {
  position: static !important;
  height: 100% !important;
  width: intrinsic;
}

【问题讨论】：

你能分享实际编译的标记吗？您正在共享反应代码，但尚不清楚 layout="fill" 和 objectFit="contain" 添加了哪些 CSS 属性（我可以猜测，但您应该在问题中真正展示它）。您的标记中也没有 <span> 元素，但我想它们是由您的 <Image> 组件呈现的。了解如何创建minimal reproducible example。
添加autoprefixer 可能会解决您的问题。 tailwindcss.com/docs/browser-support#vendor-prefixes
您可以尝试将flex-none 添加到每个具有红色背景的<div> 标签中。

标签： css next.js tailwind-css

【解决方案1】：

首先确保postcss.config.js 设置正确：

module.exports = {
  plugins: [
    "tailwindcss",
    "postcss-nesting",
    "autoprefixer"
  ]
}

这是来自 tailwindcss 文档

由于 Tailwind 不会自动将供应商前缀添加到 CSS 它会生成，我们建议安装 autoprefixer 来处理它你喜欢我们在上面的 sn-p 中显示的内容。

可能是因为使用了gap。

Safari 最近添加了这个功能，所以如果您的浏览器使用的是旧版本，它可能无法正常工作：

https://css-tricks.com/safari-14-1-adds-support-for-flexbox-gaps/

【讨论】：

【解决方案2】：

flexbox 在某些浏览器中不受支持。 https://caniuse.com/?search=flex

实现它的一种方法是使用-webkit-前缀

    display: flex;
    flex-wrap: wrap;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;

/*for others too*/
 display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;

我最近发现了一个做同样事情的插件

https://dev.to/philw_/a-small-tailwindcss-plugin-to-emulate-support-for-gap-in-older-safari-ios-browsers-1hld

另一种但不确定的实现方式是使用。我在某个地方找到了它，但不确定

display: -webkit-inline-box;

关于Flexbox在不同浏览器中的使用：

https://github.com/philipwalton/flexbugs

如果其他人不起作用，请尝试使用 autoprefixer

https://tailwindcss.com/docs/browser-support#vendor-prefixes

【讨论】：