CSS 溢出/z-index 问题 - SAFARI 中未显示标记答案

【问题标题】：CSS overflow / z-index issue - marker not shown in SAFARICSS 溢出/z-index 问题 - SAFARI 中未显示标记
【发布时间】：2017-12-28 13:22:21
【问题描述】：

看来我的大脑有点超负荷了。我无法弄清楚为什么“标记”在 Safari 中没有正确显示 - 而在 chrome 中，它工作正常。

我认为这是一个溢出问题，因为该属性并非随处设置。我已经尝试通过 Safari 开发工具设置溢出：可见和正确的 z-index，但到目前为止还没有运气。我希望你们能启发我。

问题出在以下网站http://apop.burningpips.com/ 如果您向下滚动到“社区”部分（CSS 类 - 请打开检查器），您可以看到所有项目的顶部都有一个“标记”（最新博客文章）。第一项上的标记就像在 Safari 中被裁剪掉一样。

基本上，我们有：

<section class="attractions">[...]</section>
<section class="community">
  <div class="prompt top">[...]</div>
  <div class="prompt bottom">[...]</div>
  <div class="container">[...]</div> <!-- This should overlap all -->
  <div class="cta-container wood wood2">[...]</div>
</section>

“容器”div 包含带有错误标记的代码。我无法向自己解释为什么这不起作用。请在 Safari 和 Chrome 中访问以查看差异。

我希望我提供了所有必要的信息。如果没有，请告诉我是否可以做进一步的事情。

提前致谢。

【问题讨论】：

在我电脑上的两种浏览器中都能完美显示。什么版本的 Safari？
您好，感谢您的检查。我正在运行版本 10.1 (12603.1.30.0.34)。问题已解决。我现在正在为感兴趣的人写一条新评论。
太好了，感谢更新。

标签： html css safari overflow z-index

【解决方案1】：

在尝试了设置溢出的所有变体：可见和 z-indexes 后，我发现了问题：

它是具有“post-container”类的 div 的 css 属性

--> 列数：2；

--> -webkit-column-count: 2;

我已经为第一个博客文章添加了一个margin-top，并为最后一个条目添加了一个margin-bottom。

这有帮助。

感谢大家对此进行调查。

【讨论】：