오버플로: 스크롤을 사용할 때 Firefox에서 하단 패딩이 사라지는 이유는 무엇입니까?

Firefox에서 오버플로: 스크롤이 있는 패딩이 무시됨

CSS의 오버플로: 스크롤 속성 및 패딩과 관련된 특정 시나리오에서 Firefox는 다음과 같은 독특한 동작을 나타냅니다. 요소 하단의 패딩이 사라집니다. 이는 Chrome 및 Safari와 같은 브라우저에서 관찰되는 예상 기능과 대조됩니다.

요소에 대해 수직 스크롤을 가능하게 하는 오버플로: 스크롤 속성과 페이지를 정의하는 패딩 속성을 결합하면 문제가 발생합니다. 요소의 내용과 테두리 사이의 간격. Firefox에서는 요소 하단의 패딩이 사라지고 정의된 패딩 영역의 가장자리 너머까지 콘텐츠가 표시됩니다.

이 문제를 설명하려면 다음 CSS 코드를 고려하세요.

<code class="css">.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}

ul,
li {
  padding: 0;
  margin: 0;
}</code>

이 코드를 아래와 같은 HTML 구조에 적용하면 Firefox에서는 요소 하단에 패딩이 누락된 것을 확인할 수 있지만 다른 브라우저에서는 예상대로 나타납니다.

<code class="html"><div class="container">
  <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>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</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>
  </ul>
</div></code>

[ 데모 보기](데모 URL)

이 문제를 해결하려면 간단한 순수 CSS 솔루션을 사용할 수 있습니다.

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

이 CSS 코드는 컨테이너 요소 뒤에 고정 높이의 요소를 추가합니다. 50px(하단 패딩과 동일) 이 요소를 삽입하면 누락된 패딩을 보충하는 눈에 띄는 공간이 생성되어 문제를 효과적으로 해결할 수 있습니다.

이 솔루션은 기능적이지만 이상적이거나 우아한 해결책은 아니라는 점에 유의하는 것이 중요합니다. 그러나 보다 세련된 솔루션이 나올 때까지 해결 방법을 제공합니다.

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