IE 11에서 고정 버튼이 작동하지 않는 이유는 무엇입니까?

위치: 고정 버튼이 IE 11에서 작동하지 않음

웹 개발의 발전에도 불구하고 다양한 브라우저에서 CSS 기능을 활용할 때 특정 호환성 문제가 발생할 수 있습니다. 이 경우 문제는 Internet Explorer(IE) 11의 고정 위치 속성 사용과 관련이 있습니다.

문제:

제공된 HTML 코드에는 버튼이 포함된 "sticky-button-thing-not-working-on-ie" 클래스입니다. 목표는 이 div를 고정시켜 사용자가 스크롤할 때 버튼이 화면 하단에 고정되도록 하는 것입니다. 그러나 IE 11에서는 이 동작이 발생하지 않습니다.

이유:

최신 브라우저에 도입된 고정 위치 지정 속성을 사용하면 요소가 현재 위치에 유지되는 동안 스크롤하여 사용자가 중요한 콘텐츠에 편리하게 액세스할 수 있도록 합니다. 불행하게도 IE 11은 기본적으로 이 속성을 지원하지 않습니다.

해결책:

IE 11에서 의도한 동작을 달성하기 위한 대체 접근 방식은 고정 위치 속성을 사용하는 것입니다. . 고정 요소와 달리 고정 요소는 스크롤에 관계없이 뷰포트를 기준으로 일정한 위치를 유지합니다. 몇 가지 다른 CSS 조정과 수정을 결합하면 원하는 고정 동작을 에뮬레이트하여 IE 11 및 기타 최신 브라우저 모두에서 버튼이 화면 하단에 유지되도록 할 수 있습니다.

수정됨 코드:

.sticky-button-thing-not-working-on-ie {
  position: fixed;                          /* added to support older browsers */
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

참고: 끈끈한 속성은 코드에서 안전하게 제거할 수 있습니다. 의도한 대로 활용되지 않기 때문입니다. 반면, 수정됨은 ​​이전 브라우저에 원하는 기능을 제공합니다.

추가 정보:

• 버전 16부터 Edge 브라우저는 고정 위치 속성을 지원합니다. .
• 이 솔루션은 IE 11의 화면 하단에 버튼이 고정되어 있지 않은 특정 문제를 해결합니다. 브라우저 간 호환성.

위 내용은 IE 11에서 고정 버튼이 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!