css：列数3，图像浮动2，chrome不播放。为什么？

我需要布局与3列的图像跨越2在右上角。找到了几种解决方案，最佳解决方案如下：

但是：两者都不能与Chrome一起工作。负上边距使文本消失在不可发现的东西后面。 我使用的解决方案是浮动框的绝对定位，就像在另一个解决方案中，浮动框的左边距是文本不可见的原因

我使用div#flotter来表示图像，具有相同的效果

HTML:

我做了一个小提琴，在Chrome'Title 1'尿布，在Safari和Firefox没有问题。有什么建议吗？

---

您可以尝试

背面可视性

来修复该视觉缺陷

#outer #inner > *{
    backface-visibility:hidden;
    }

---

对于infos，这里是另一个不同方法的示例（一个伪元素正在提取第一列内容。

谢谢！你知道为什么背面可见性会影响这一点吗？我只知道Chrome中经常以这种方式处理此类错误（3d&transform有很多）。

#outer{
    position: relative;
    font-size: 10pt;
    width: 100vw;
    min-height: 88vh;
    column-count: 3;
    column-gap: 1vw;
    padding-top: 54vw;
    background-color: red;
  }
#outer #floater{
    position: absolute;
    right: 0;
    top: 0;
    width: 66vw;
    height: 50vw;
    margin-bottom: 2vw;
    display: block;
    border: 2px solid blue;
}
#outer #inner{
    max-width: 100vw;
    background-color: green;
    margin-top: -11vw;
}

#outer #inner > *{
    backface-visibility:hidden;
    }