Question

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

元素的层次结构是threads-container＆gt; threads＆gt; thread＆gt; message

它只发生在message中的最后一个thread容器中，并且仅在某些情况下发生。我在这里没有注意到任何模式。此外，如果我从border-bottom中删除thread，则此行为会消失。我正在粘贴下面的相关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一个高度。

Answer 2

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

如果没有一些HTML，很难找到答案，但我可以告诉你，如果你使用像Sass这样的CSS预处理器，你将能够直观地看出CSS如何更好地交互，这样可以更容易地编写这样的代码。

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

更新：我只是把你的代码看得更近了一点。你有每个选择器写成'div.class-name'，你真的不需要'div'。我严重怀疑这会影响任何事情，但如果你不需要它，请不要使用它。此外，您应该在每个选择器之间放置逗号。这可能也没有做任何事情，但你可以试试。

div内容被切断了

2 个答案: