Html div内容被切断
我在Safari上遇到了一个随机的CSS行为，其中一个div中的内容有时会被切断。如果我以某种方式使用鼠标或按Ctrl+A选择内容，它会重新出现。即使通过控制台或调整窗口大小修改任何CSS属性，也会使内容显示出来。下面是数据和比较 元素的层次结构是Html div内容被切断,html,css,safari,cross-browser,border,Html,Css,Safari,Cross Browser,Border,我在Safari上遇到了一个随机的CSS行为，其中一个div中的内容有时会被切断。如果我以某种方式使用鼠标或按Ctrl+A选择内容，它会重新出现。即使通过控制台或调整窗口大小修改任何CSS属性，也会使内容显示出来。下面是数据和比较 元素的层次结构是线程容器线程线程消息 它只发生在线程中的最后一个消息容器中，并且只在某些情况下发生。我还没注意到这里有什么图案。此外，如果我从线程中删除边框底部，此行为将消失。我正在粘贴以下相关CSS规则： div.main-container div.threads
线程容器线程线程消息线程消息线程边框底部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中已知的错误还是我遗漏了什么？您的问题没有提供足够的信息来找到真正的解决方案。我并不想批评你，但你似乎是从格式良好的代码开始的，有一两个错误，然后在试图解决问题时把它搞砸了。我也倾向于这样做，我通常会遇到同样的问题，加上一堆毫无意义的代码 如果没有一些HTML，就很难找到答案，但是我可以告诉你，如果你使用CSS预处理器，比如Sass，你将能够更好地可视化你的CSS交互方式，这使得正确地编写这样的代码变得容易得多 PS-即使你找到了这个问题的答案，你仍然应该看看像Sass这样的工具，因为它们使CSS变得更加有用
更新：我只是仔细看了一下你的代码。每个选择器都写为'div.class-name'，实际上不需要'div'在其中。我严重怀疑这会影响任何东西，但如果你不需要它，就不要使用它。此外，还应在每个选择器之间添加逗号。这可能也没什么用，但你可以试试看。这不是CSS问题。我的HTML格式如下：
<div class="threads">
<div class="thread-options">
...
</div>
<div class="threads">
<div class="thread">
...
</div>
<div class="thread">
...
</div>
</div>
</div>
...
...
...
线程选项线程线程线程选项线程solidthreadfloat