>웹 프론트엔드 >CSS 튜토리얼 >Internet Explorer 11에서 내 버튼에 위치: 고정이 작동하지 않는 이유는 무엇입니까?

Internet Explorer 11에서 내 버튼에 위치: 고정이 작동하지 않는 이유는 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-01 16:15:15337검색

위치: Internet Explorer 11에서 고정 버튼이 작동하지 않습니다

문제:

버튼이 포함된 div를 고정으로 설정해야 합니다. 이 div의 버튼은 사용자가 스크롤할 때 페이지 하단에 유지됩니다. 이렇게 하면 사용자가 버튼을 클릭하기 위해 끝까지 스크롤할 필요가 없습니다.

버튼이 포함된 div는 다음 위치에 있습니다.

<div class="form-group sticky-button-thing-not-working-on-ie">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Save" class="btn btn-default" />
    </div>
</div>

CSS 클래스는 Firefox에서 버튼을 고정하는 데 사용됩니다.

.sticky-button-thing-not-working-on-ie {
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

문제:
이 코드는 Internet Explorer 11에서 제대로 실행되지 않습니다. IE11에서 동일한 코드가 작동하도록 하려면 어떻게 해야 합니까?

예상 결과:

Why is Position: sticky not working for my button in Internet Explorer 11?

샘플 페이지: https://jsfiddle.net/thunderbolt36/a4yjfg13/

답변:

sticky는 IE11에서 작동하지 않지만 운 좋게도 이 경우에는 고정 및 고정을 사용할 수 있습니다. 이전 브라우저와 새 브라우저 모두에서 작동합니다. 예상대로 사용되지 않으므로 끈적끈적함을 실제로 무시할 수도 있습니다. 끈적끈적의 좋은 점은 상단 가장자리 바로 아래에 배치한 다음 아래로 스크롤하면 상단 가장자리에 도달할 때까지 페이지와 함께 이동한 다음 다시 위로 스크롤할 때까지 멈추고 그대로 유지된다는 것입니다.

.sticky-button-thing-not-working-on-ie {
  position: fixed;                        /* 添加此行以支持较旧的浏览器 */
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

참고: Edge는 버전 16부터 끈적끈적

을 지원합니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.