IE8에서 인라인 블록 디스플레이가 작동하지 않는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

IE8에서 인라인 블록 디스플레이가 작동하지 않는 이유는 무엇입니까?

Patricia Arquette

Oct 29, 2024 pm 09:35 PM

Why Is My Inline-Block Display Not Working in IE8?

IE8: 디스플레이 인라인 블록 문제 해결

웹 개발 영역에서 특정 시각적 레이아웃을 달성하려는 열망은 공통적인 과제를 안겨줍니다. 프로그래머를 위한. 이 프로세스의 한 측면에는 특히 다양한 브라우저 환경에서 올바른 요소 정렬을 보장하는 것이 포함됩니다. 종종 개발자들 사이에서 불만을 불러일으키는 요소 위치 지정 방법 중 하나는 인라인 블록 표시입니다.

문제:

다음 코드 조각을 고려하세요.

<style type="text/css" media="all">
  span, ul, ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    list-style: none;
  }   
</style>

<span>i would want</span>
<ul>
  <li>this</li>
  <li>on</li>
  <li>one line.</li>
</ul>

로그인 후 복사

IE8에서 원하는 결과는 요소를 인라인으로 정렬하는 것입니다. 그러나 IE8의 인라인 블록 지원에도 불구하고 이러한 정렬을 달성하려는 시도는 실패한 것으로 입증되었습니다.

해결책:

놀랍게도 범인은 인라인에 있지 않을 수도 있습니다. -블록 선언 자체. 대신 누락된 문서 유형이 IE8의 올바른 표시 동작을 방해할 가능성이 높습니다. 이 문제를 해결하려면 다음 doctype 선언을 HTML의 첫 번째 줄에 추가하면 됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

로그인 후 복사

설명:

doctype 선언은 브라우저가 다음에서 작동하도록 지시합니다. 특정 모드를 사용하여 지정된 HTML 사양과의 호환성을 보장합니다. 문서 유형이 없으면 IE8은 기본 호환성 모드를 사용하여 잠재적으로 인라인 블록 표시를 잘못 렌더링할 수 있습니다. doctype을 사용하여 렌더링 모드를 명시적으로 정의함으로써 이 동작을 재정의하고 원하는 인라인 블록 정렬을 활성화합니다.

위 내용은 IE8에서 인라인 블록 디스플레이가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.