Firefox 및 Opera에서 `max-width`가 `display: table-cell` 내부의 이미지를 무시하는 이유는 무엇입니까?

최대 너비 내부 디스플레이: table-cell의 브라우저 불일치

특정 상황에서는 디스플레이 내에서 최대 너비 스타일 속성이 무시됩니다. : Firefox 및 Opera의 테이블 셀 요소는 Chrome 및 IE에서 올바르게 표시되는 경우에도 마찬가지입니다. 이러한 불일치는 원인과 가장 적절한 해결책에 대한 의문을 제기합니다.

원인

W3C 사양에 따르면 max-width는 인라인 요소에 적용되지 않습니다. 그러나 디스플레이 내의 이미지: table-cell은 대부분의 브라우저에서 블록과 유사한 것으로 간주되는 반면 Firefox 및 Opera는 이를 인라인으로 처리합니다. 이러한 해석의 차이로 인해 일관되지 않은 동작이 발생합니다.

해결 방법

한 가지 해결 방법은 디스플레이: 테이블 및 디스플레이가 있는 다른 div 안에 디스플레이: 테이블-셀 래퍼 div를 배치하는 것입니다. 테이블 레이아웃: 고정됨. 이로 인해 Firefox와 Opera는 최대 너비 규칙을 준수하게 됩니다.

예

<code class="html"><div style="display: table">
  <div style="display: table-cell; padding: 15px; width: 200px">
    <img src="image.jpg" style="max-width: 100%" />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
    </p>
  </div>
</div></code>

권장

가장 표준을 준수하는 접근 방식은 디스플레이 내의 이미지(table-cell)를 포함하여 인라인 요소에 최대 너비를 사용하지 않는 것입니다. 대신, 그러한 요소의 너비를 제어하기 위한 대체 방법을 사용하십시오.

위 내용은 Firefox 및 Opera에서 `max-width`가 `display: table-cell` 내부의 이미지를 무시하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!