Firefox가 오버플로: 스크롤을 사용할 때 패딩을 무시하는 이유는 무엇입니까?

Firefox에서 오버플로: 스크롤 사용 시 패딩을 무시합니다

오버플로 사용 시: 패딩 스타일로 스크롤하면 Firefox에서 수수께끼 문제가 발생합니다. 요소의 패딩이 사라집니다. 이 동작은 직접 패딩 시나리오와 상속된 패딩 시나리오 모두에서 관찰됩니다.

원인:

문제의 정확한 원인은 알 수 없지만 Firefox의 렌더링 동작에서 비롯된 것으로 보입니다. 패딩을 고려하지 않고 오버플로된 콘텐츠가 잘립니다.

해결 방법:

이러한 불일치를 보완하기 위해 순수 CSS 솔루션을 구현할 수 있습니다.

<code class="css">.container:after {
    content: "";
    height: 50px;
    display: block;
}</code>

설명:

이 CSS 스니펫은 컨테이너 뒤에 빈 의사 요소를 추가합니다. 높이를 하단 패딩과 동일한 값으로 설정하고 표시를 차단으로 설정하면 Firefox가 패딩을 따르도록 강제하는 보이지 않는 버퍼가 생성됩니다.

제한 사항:

이 해결 방법으로 문제가 해결되지만 다음과 같은 주의 사항이 있습니다.

• 스크롤 가능한 컨테이너 내의 콘텐츠가 컨테이너 높이를 넘어 오버플로되는 경우 추가 의사 요소 높이가 표시됩니다.

이를 방지하려면 JavaScript를 사용하여 오버플로된 콘텐츠의 높이에 따라 의사 요소의 높이를 동적으로 조정하여 패딩을 수용하는 동안 숨겨진 상태를 유지하도록 할 수 있습니다.

위 내용은 Firefox가 오버플로: 스크롤을 사용할 때 패딩을 무시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!