표 셀의 이미지에 대해 Firefox 및 Opera에서 'max-width'가 다르게 동작하는 이유는 무엇입니까?

Firefox와 Opera 간의 최대 너비 동작 차이 이해

웹 개발에서는 브라우저 간 호환성을 보장하는 것이 필수적입니다. 불일치가 발생하는 한 가지 영역은 표 셀 내에서 CSS 스타일을 처리하는 것입니다. 이 경우 Firefox 및 Opera는 max-width 속성과 관련하여 Chrome 및 IE에 비해 다른 동작을 나타냅니다.

다음 HTML 및 CSS 코드를 고려하세요.

<code class="html"><div style="display: table-cell; padding: 15px; width: 200px;">
  <img src="image.jpg" style="max-width: 100%;" />
  <p>Content</p>
</div></code>

Chrome에서 IE에서 이 코드는 이미지의 최대 너비를 포함 셀의 100%로 올바르게 설정합니다. 그러나 Firefox 및 Opera에서는 max-width 스타일이 무시됩니다.

왜 불일치합니까?

W3C(World Wide Web Consortium) 사양에 따르면 최대 너비는 너비는 인라인 요소에 적용되지 않습니다. 이미지와 같은 인라인 요소에는 고유한 너비나 높이가 없으며 해당 크기는 일반적으로 포함된 콘텐츠에 따라 결정됩니다.

제공된 예에서 이미지 태그는 표 셀 내의 인라인 요소입니다. 따라서 max-width 스타일은 효과가 없습니다.

작동하는 솔루션

이 문제를 해결하고 브라우저 간 호환성을 보장하려면 다음 접근 방식을 채택할 수 있습니다. :

1. display: table 및 table-layout:fixed를 사용하여 테이블 셀 div를 다른 div로 래핑합니다.
2. 이렇게 하면 Firefox와 Opera가 이미지에 최대 너비 규칙을 적용하게 됩니다.

업데이트된 HTML 및 CSS:

<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>Content</p>
  </div>
</div></code>

이 해결 방법을 구현하면 모든 주요 브라우저에서 원하는 동작을 유지할 수 있습니다.

위 내용은 표 셀의 이미지에 대해 Firefox 및 Opera에서 'max-width'가 다르게 동작하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!