為什麼帶有 UL 標籤的固定位置 div 在 Chrome 和 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中文網其他相關文章！