>  기사  >  웹 프론트엔드  >  태그 li는 블록 수준 요소 분석_HTML/Xhtml_웹 페이지 제작입니까?

태그 li는 블록 수준 요소 분석_HTML/Xhtml_웹 페이지 제작입니까?

WBOY
WBOY원래의
2016-05-16 16:41:191587검색

왜 높이를 설정할 수 있나요? 그런데

요소와는 달리 "세미 인라인"(인라인: inline[text]-level) 요소처럼 느껴집니다. HTML 4는 다음과 같이 설명됩니다.

다음 요소는 블록 수준 요소를 포함할 수 있으므로 블록 수준 요소로 간주될 수도 있습니다.

  • DD – 정의 설명
  • DT – 정의 용어
  • 프레임세트 – 프레임세트
  • LI – 목록 항목
  • TBODY – 테이블 본체
  • TD – 테이블 데이터 셀
  • TFOOT – 테이블 풋
  • TH – 테이블 헤더 셀
  • THEAD – 테이블헤드
  • TR – 테이블 행

이 설명은 <li />가 "세미 인라인" 요소임을 말하는 것 같습니다. 물론 이 목록의 <td />과 유사한 요소들도 나에게 그런 의문을 안겨주었다. 오늘은 각 브라우저의 기본 CSS를 살펴보았습니다. 결과는 이렇습니다.

Browsers CSS
IE6/IE7 li{display:block;}
IE8 / Webkit / Firefox / Opera li{display:list-item;}

여기서는 기본적으로 명확합니다. IE6/7 이외의 A급 브라우저에서는 "세미 인라인" 요소입니다. display:list-item;의 경우, 사실 현재 모든 A급 브라우저에서 지원하고 있음에도 불구하고 사용하는 사람은 많지 않습니다. 왜? 사실 아무 소용이 없습니다. Quirks 모드에서 PPK는 다음과 같이 말합니다.

display: list-item은 요소가 목록 항목으로 표시됨을 의미합니다. 이는 주로 요소 앞에 글머리 기호(UL과 같은)가 있음을 의미합니다. 단, Mac의 IE 5에서는 숫자가 표시됩니다(예: OL) 숫자에 버그가 있습니다. 페이지의 모든 이전 LI는 1로 계산되므로 이 예는 숫자 5로 시작합니다(스크린샷은 호환성 LI를 삽입하기 전에 만들어졌습니다).

실제 예:

디스플레이: 차단

표시: 목록 항목
표시: 목록 항목

맞습니다. 사실 이것은 큰 의미가 없습니다. 하지만 그것은 나의 의문 중 하나를 해결한 것이라고 볼 수 있다. 여러분도 그런 의문이 든다면, 아마 다음번에 코딩할 때 버그나 다른 질문이 생긴다면 아마도 빠르게 답변을 받으실 수 있을 것입니다.

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