div 内容被截断答案

【问题标题】：div content gets cut offdiv 内容被截断
【发布时间】：2017-03-23 16:33:12
【问题描述】：

我在 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 中的一个已知错误还是我在这里遗漏了什么？

【问题讨论】：

solid in thread 规则为大写 S，应为小写
由于您使用的是float，我看不清楚，请同时发布您的 HTML
@LGSon 这只是我认为相关的 CSS。主容器被清除，更新问题。小写的 s 也没有运气。
即使这是相关的 CSS 代码，您也应该发布一些重现问题的 HTML。如果你这样做，你将有更多的机会得到答案。
您必须提供 html 或解决问题，否则我们无能为力。

标签： html css safari cross-browser border

【解决方案1】：

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

如果没有一些 HTML，将很难找到答案，但我可以告诉你，如果你使用 CSS 预处理器，比如 Sass，你将能够可视化你的 CSS 如何更好地交互，并且使正确编写这样的代码变得容易得多。

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

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

【讨论】：

我很抱歉不清楚。该页面是使用 MeteorJS 和 React 构建的。我上面粘贴的样式确实是使用 Sass 生成的。我没有发布 HTML 的原因是这是一个随机问题，我不会在所有页面上都遇到它。我正在尝试创建一个 JSFiddle 来复制它，但我还没有成功。我想知道 Safari 中是否有一个常见的已知问题可以为我指明正确的方向。

【解决方案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 一个高度。

【讨论】：