div內容被切斷

Question

我在Safari上遇到了一個隨機的CSS行爲，有時，其中一個div的內容被切斷。如果以某種方式使用鼠標或按Ctrl + A選擇內容，它會再次出現。即使通過控制檯修改任何CSS屬性或調整窗口大小，也會顯示內容。以下是before和after的比較。

元素的層次結構是threads-container>threads>thread>message

它僅發生在最後message容器在thread和僅發生在一些情況下。我在這裏沒有注意到任何模式。另外，如果我從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內容。只要threads在thread-options之前加載，它就會推下threads，可能會令Safari瀏覽器感到困惑並導致渲染錯誤。雖然我不太確定確切的問題是什麼，但即使在沒有內容爲我解決問題的情況下也給予高度thread-options。

Answer 2

您的問題並沒有提供足夠的信息來尋找真正的解決方案。我並不是說要批評，但似乎你是從格式良好的代碼開始的，有一兩個錯誤，然後把它搞砸，試圖解決這個問題。我也傾向於這樣做，而且我通常會遇到同樣的問題，再加上一堆無意義的代碼。

如果沒有HTML，很難找到答案，但我可以告訴你，如果你使用CSS預處理器，比如Sass，你將能夠可視化你的CSS如何更好地交互，並且這使得正確編寫這樣的代碼變得更容易。

PS-即使你找到了這個答案，你仍應該檢查出像Sass這樣的工具，因爲它們讓CSS變得更有用。

更新：我只是看着你的代碼更接近一點。您將每個選擇器寫爲'div.class-name'，並且您並不需要那裏的'div'。我認真地懷疑這會影響任何事情，但如果你不需要它，就不要使用它。此外，你應該在每個選擇器之間插入逗號。這可能也沒有做任何事情，但你可以嘗試。