Firefox와 Opera가 디스플레이 내 이미지(table-cell)의 최대 너비를 존중하지 않는 이유는 무엇입니까?

Display: table-cell 내 Firefox 및 Opera의 최대 너비 무시 문제 해결

이미지의 최대 너비 지정에도 불구하고 Firefox는 Opera는 디스플레이 내에서 table-cell 스타일을 무시합니다. 이는 테이블과 같은 구조에서 이미지 너비를 제한하려고 할 때 예기치 않은 동작이 발생할 수 있습니다.

최대 너비를 무시하는 이유

W3C 사양에 따르면, max-width 속성은 인라인 요소에 적용되지 않습니다. 이미지는 기본적으로 인라인 요소입니다. 따라서 인라인 요소 역할을 하는 테이블 셀 내에서는 max-width가 무시됩니다.

해결 방법 및 W3C 표준 준수

한 가지 해결 방법은 포함하는 셀을 중첩하는 것입니다. 디스플레이: 테이블 및 테이블 레이아웃: 고정이 있는 다른 div 내의 테이블 셀 div. 상위 컨테이너에 이러한 속성을 설정함으로써 Firefox와 Opera는 모두 테이블 셀 내의 이미지에 대한 최대 너비 규칙을 준수합니다.

이 솔루션은 기본 인라인 특성을 수정하지 않으므로 W3C 사양을 준수합니다. 디스플레이 내 이미지 수: 테이블-셀. 단순히 상위 컨테이너에 테이블 구조를 추가하여 브라우저가 내부 셀을 인라인 요소가 아닌 테이블 셀로 처리하도록 합니다.

예

아래는 예입니다. 이 해결 방법의 실제 사례:

<code class="html"><div style="display: table;">
  <div style="display: table-cell; padding: 15px; width: 200px;">
    <img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy"   style="max-width:90%" alt="Firefox와 Opera가 디스플레이 내 이미지(table-cell)의 최대 너비를 존중하지 않는 이유는 무엇입니까?" >
    <p>Content goes here...</p>
  </div>
</div></code>

이 기술을 사용하면 브라우저 간 호환성을 보장하면서 표 셀 내에서 원하는 이미지 크기 조정을 유지할 수 있습니다.

위 내용은 Firefox와 Opera가 디스플레이 내 이미지(table-cell)의 최대 너비를 존중하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!