오버플로 수정 방법: 고정된 상위/하위 요소의 숨겨진 버그?

오버플로: 고정 상위/하위 요소의 숨겨진 버그

오버플로 설정 시: 고정 상위 요소에 숨김, 그 안에 있는 모든 하위 요소 경계 외부에 표시될 수 있습니다. 이는 대부분의 브라우저에서 고정 위치 지정이 처리되는 방식으로 인해 발생합니다.

이 문제를 해결하려면 CSS 클립 속성을 활용할 수 있습니다.

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
  clip: rect(0px, 300px, 300px, 0px); /* Clip the parent to its own dimensions */
}

상위 브라우저에서 클립 속성을 설정하여 요소의 표시 부분과 해당 요소를 제한하는 직사각형 영역을 정의합니다.

고려 사항:

• 상위 요소에 정적 또는 상대 위치 지정을 사용하지 마세요. 상대적으로 배치된 컨테이너 내에서 절대적으로 배치된 상위 항목을 사용하는 것이 좋습니다.
• 클립 좌표에는 백분율이 지원되지 않습니다. 100%를 나타내려면 자동을 사용하세요.
• 하위 요소 위치 지정 및 CSS3 변환(예: 배율)은 특정 브라우저(예: IE11 및 Chrome34)에서 제한될 수 있습니다.

호환성 향상 , 하위 스타일에 다음 스타일을 추가하는 것을 고려해보세요. 요소:

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

브라우저 호환성:

• IE8: 메뉴가 표시되지만 링크를 클릭할 수 없습니다.
• IE9: 다음과 같은 경우 메뉴가 표시되지 않습니다. 부분적으로 스크롤 없이 볼 수 있는 부분
• iOS Safari <5: 메뉴가 표시되지 않음 제대로
• iOS Safari 5: 잘린 콘텐츠가 스크롤 시 다시 그려질 수 있음
• FF (13 ), IE10, Chrome, Android용 Chrome: 일반적으로 예상대로 작동합니다

참고 이 접근 방식은 이전 브라우저나 모바일 브라우저에서는 완전히 지원되지 않을 수 있습니다.

위 내용은 오버플로 수정 방법: 고정된 상위/하위 요소의 숨겨진 버그?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!