html - div 内容被截断

Question

我在 Safari 上遇到随机 CSS 行为，有时其中一个 div 中的内容被截断。如果我以某种方式使用鼠标或按 Ctrl+A 选择内容，它会重新出现。即使通过控制台或调整窗口大小修改任何 CSS 属性，也会使内容显示出来。这是 before和 after比较。

元素的层次结构是threads-container > threads > thread > message

它只发生在 thread 中的最后一个 message 容器中，并且只发生在某些情况下。我在这里没有注意到任何模式。此外，如果我从 thread 中删除 border-bottom，此行为就会消失。我在下面粘贴相关的 CSS 规则:

div.main-container div.threads-container {
  float: left;
  display: block;
  margin-right: 0%;
  width: 39.58333%;
  background-color: #F6F7F9;
  height: 100%;
  position: relative;
  word-wrap: break-word;
}
div.main-container::after {
  clear: both;
  content: "";
  display: table;
}
div.main-container div.threads-container:last-child {
  margin-right: 0;
}

div.main-container div.threads-container div.threads {
  background-color: #fff;
  height: calc(100% - 295px);
  position: relative;
  overflow-y: scroll;
  word-wrap: break-word;
  padding: 0px 10px 10px 0px;
}

div.main-container div.threads-container div.threads div.thread {
  border-bottom: 1px Solid #e4e4e4;
  padding-bottom: 10px;
  display: block; 
}

div.main-container div.threads-container div.threads div.thread div.message {
  color: #444444;
  border-left: 3px solid transparent;
  padding: 10px 0px 0px 10px; 
}

这是 Safari 中的已知错误还是我在这里遗漏了什么？

Answer 1

这不是 CSS 问题。我的 HTML 布局如下:

<div class="threads">
    <div class="thread-options">
    ...
    </div>
    <div class="threads">
        <div class="thread">
        ...
        </div>
        <div class="thread">
        ...
        </div>
    </div>
</div>

thread-options 和threads 的内容是通过 Meteor 异步生成的。每当 threads 在 thread-options 之前加载时，它会将 threads 下推，这可能会混淆 Safari 并导致渲染错误。虽然我不太确定确切的问题是什么，但是即使没有内容也能为 thread-options 提供高度，这对我来说解决了这个问题。