為什麼帶有 UL 標籤的固定位置 div 在 Chrome 和 Opera 中消失？-css教學-PHP中文網

為什麼帶有 UL 標籤的固定位置 div 在 Chrome 和 Opera 中消失？

Mary-Kate Olsen

發布： 2024-10-27 05:15:29

原創

975 人瀏覽過

Why do fixed position divs with UL tags disappear in Chrome and Opera?

固定位置和UL 標籤的Chrome 和Opera 渲染問題

HTML 程式碼中的某些設定可能會導致Google Chrome 和Opera 出現渲染問題。當固定位置 div 包含標籤時，按一下錨定連結時 div 可能會間歇性消失。此問題是由於 Chrome 渲染引擎內部問題造成的。

Chrome 解決方案

在Chrome 中，可以透過新增-webkit-transform:translateZ( 0) 到固定位置div 的CSS 樣式：

#sidebar {
  -webkit-transform: translateZ(0); /* Fix for Chrome rendering issue */
}

登入後複製

此技術強制Chrome 對div 執行3D 轉換，這似乎解決了底層渲染問題。

Opera 解決方案

Opera 對此問題的處理與 Chrome 不同。要解決 Opera 中的問題，需要不斷強制重新繪製可能會影響佈局的屬性，但實際上沒有影響。在這種情況下，使用margin-bottom 是因為它不太可能幹擾頁面佈局：

@keyframes noop {
  0%   { margin-bottom: 0; }
  100% { margin-bottom: 1em; }
}

#sidebar {
  animation: noop 1s infinite;
}

登入後複製

此程式碼確保Opera 不斷重新繪製側邊欄的margin-bottom，迫使其保持其固定位置。雖然這個解決方案並非完全完美，但它最大限度地減少了閃爍並恢復了預期的行為。

需要注意的是，Opera 解決方案不是通用解決方案，可能需要根據特定的定位要求進行調整有問題的元素。如果您遇到此問題，請嘗試修改建議的 CSS 以滿足您的需求。

以上是為什麼帶有 UL 標籤的固定位置 div 在 Chrome 和 Opera 中消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！