Chrome 및 Opera에서 UL 태그가 있는 고정 위치 div가 사라지는 이유는 무엇입니까?

고정 위치 및 UL 태그 관련 Chrome 및 Opera 렌더링 문제

HTML 코드의 특정 구성으로 인해 Google Chrome 및 Opera에서 렌더링 문제가 발생할 수 있습니다. 고정 위치 div에 < UL > 태그가 있는 경우 앵커 링크를 클릭하면 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를 수정해 보세요.

위 내용은 Chrome 및 Opera에서 UL 태그가 있는 고정 위치 div가 사라지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!