为什么带有 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中文网其他相关文章！