Firefox 및 Opera에서 표 셀의 이미지에 Max-Width가 적용되지 않는 이유는 무엇입니까?

디스플레이에서 최대 너비를 무시하는 Firefox 및 Opera: Table-Cell

주어진 CSS 코드 조각에서 테이블 내에 포함된 이미지 cell은 Firefox 및 Opera 브라우저에서 지정된 최대 너비 스타일을 무시합니다. 원인을 이해하고 크로스 브라우저 솔루션을 찾는 것이 중요합니다.

W3C 사양에 명시되어 있듯이 인라인 요소에는 max-width가 적용되지 않습니다. 이미지의 표시 속성을 차단으로 설정하려고 시도했지만 문제가 지속됩니다.

이 동작을 수정하려면 테이블 셀이 포함된 div 주위에 display: table이 포함된 래퍼 div를 추가해야 합니다. 또한 래퍼 div에는 table-layout: 고정 속성이 포함되어야 합니다. 이 수정을 통해 언급된 모든 브라우저에서 최대 너비가 준수됩니다.

크로스 브라우저 솔루션

아래 업데이트된 코드 조각은 문제를 효과적으로 해결합니다.

<code class="css"><div style="display: table">
  <div style="display: table-cell; width: 200px; table-layout: fixed;">
    <img src="my-image.jpg" style="max-width: 100%;" />
  </div>
</div></code>

이 코드에서는 테이블 셀의 래퍼 div가 테이블 div 내에 배치되고 테이블 레이아웃이 고정으로 설정됩니다. 이 구성은 Firefox 및 Opera를 포함한 브라우저 전반에서 일관성을 보장합니다.

위 내용은 Firefox 및 Opera에서 표 셀의 이미지에 Max-Width가 적용되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!