Firefox가 오버플로: 스크롤을 사용하여 요소 하단의 여백을 생략하는 이유는 무엇입니까?

오버플로로 인한 Firefox의 패딩 누락 문제 해결

오버플로: 스크롤 및 패딩 CSS 속성을 모두 구현할 때 사용자는 Firefox에서 Chrome 및 Safari와 같은 브라우저와 달리 요소 하단에 패딩이 있습니다.

문제 시나리오:

`

< ;ul>

<li>padding above first line in every Browser</li>
<li>content</li>
<li>content</li>
...
<li>content</li>
<li>content</li>
<li>content</li>
<li>no padding after last line in Firefox</li>

`

이 스니펫에서 요소의 높이는 100px, 패딩은 50px, 빨간색 테두리 및 세로 스크롤 오버플로. 그러나 Firefox에서는 컨테이너 하단의 패딩이 누락되어 예상치 못한 모습이 나타납니다.

해결 방법:

이 문제는 당황스러워 보일 수 있지만 상대적으로 간단한 순수 CSS 솔루션으로 이 문제를 해결할 수 있습니다.

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

이 CSS 규칙을 추가하면 컨테이너의 패딩과 높이가 같은 빈 요소를 삽입할 수 있습니다. 이 요소는 자리 표시자 역할을 하여 스크롤 오버플로 시에도 패딩이 일관되게 유지되도록 합니다.

데모:

[Fiddle](https://jsfiddle.net /rdx8k4mz/) 해결 방법을 보여줍니다.

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