div 内容被截断

Question

我在 Safari 上遇到随机 CSS 行为，其中一个 div 中的内容有时会被截断。如果我以某种方式 select 使用鼠标或按 Ctrl+A 的内容，它会重新出现。即使通过控制台修改任何 CSS 属性或通过调整 window 的大小，也会使内容出现。这是 before and 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

你的问题并没有提供足够的信息来找到真正的解决方案。我并不是要批评，但看起来你是从格式良好的代码开始的，有一两个错误，然后为了解决问题而搞砸了。我也倾向于这样做，而且我通常会遇到同样的问题，加上一堆无意义的代码。

如果没有一些 HTML，很难找到这个问题的答案，但我可以告诉你，如果你使用 CSS 预处理器，比如 Sass，您将能够直观地看到您 CSS 如何更好地进行交互，并且可以更轻松地正确编写这样的代码。

PS- 即使您找到了这个问题的答案，您仍然应该查看像 Sass 这样的工具，因为它们使 CSS 变得非常有用。

更新：我只是仔细查看了您的代码。您将每个选择器写为 'div.class-name'，并且您实际上并不需要其中的 'div'。我严重怀疑这会影响什么，但如果你不需要它，就不要使用它。此外，您应该在每个选择器之间放置逗号。这可能也没有任何作用，但你可以试试看。

Answer 2

这不是 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 一个高度来解决我的问题。

div 内容被截断

div content gets cut off

html

css

safari

border

cross-browser