인라인블록속성_HTML/Xhtml_웹페이지 제작 호환성

1년 전 인터넷에는 inline-block 속성에 대한 기사가 없었습니다. 이 속성에 대한 모든 분들의 이해를 돕기 위해 "디스플레이: Inline-block의 심층 이해" 기사를 요약해서 정리했습니다. 그때에.
요즘에는 inline-block 속성 사용에 대한 요구가 늘어나고 있습니다. 아쉽게도 Firefox3 베타, IE8 베타, Opera, Safari만 여전히 inline-block 속성을 지원합니다. (참고: 원래는 Opera와 Safari만 지원했습니다. ), 그러나 IE6, IE7은 hasLayout을 트리거하여 시뮬레이션할 수 있습니다. Firefox2에는 -moz-inline-box 및 -moz-inline-stack 개인 속성이 있습니다(이 두 속성의 비교는 Qin Ge의 "디스플레이 적용의 두 가지 예"에서 인용됨). :인라인블록").
실제 애플리케이션에서 -moz-inline-box에는 요소 간 정렬과 같은 문제가 있습니다. Firefox에도 정렬 문제를 해결하는 데 도움이 되는 전용 속성인 -moz-box-align이 있지만 여전히 그럴 것이라고 예측하기는 어렵습니다. 문제가 많으며 상대적으로 일반적으로 -moz-inline-stack은 Firefox3에서 테스트할 수 있는 inline-block처럼 동작합니다. 그러나 -moz-inline-stack을 사용할 때 버그가 있습니다. display:-moz-inline-stack; 요소의 외부 요소가 display:inline;인 경우 해당 요소에 포함된 링크를 Firefox에서 클릭할 수 없습니다. 이를 해결하려면 position:relative를 사용하세요.
우리가 시뮬레이션한 최종 코드는 다음과 같습니다.
display:inline-block; /*Firefox3 베타, IE8 베타, Opera, Safari 지원, IE에서 인라인 요소를 트리거하는 hasLayout*/
display:-moz-inline-stack; /* Firefox의 개인 속성, You -moz-inline-box를 사용할 수도 있습니다 */
zoom:1; /*hasLayout은 IE에서 실행됩니다*/
*display:inline; /* IE에서 hasLayout이 실행되면 블록 요소를 인라인으로 설정하면 display:inline 효과가 다음과 유사해집니다. 인라인 블록 */
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 텍스트를 숨기려면 다음을 사용할 수 있습니다. 이 네 가지 속성 */
/*또한 위의 텍스트를 숨기려면 더 간단한 방법을 사용할 수도 있습니다: line-height: super Large value: 0;
overflow:hidden; /* 오버플로 콘텐츠 숨기기 */
vertical-align:middle; /* Opera의 상대적으로 큰 편차를 위해 선을 수직으로 중앙에 배치합니다 */
너비:? px; /*? 자동이 아닌 값*/
높이:? px; /*? 자동이 아닌 값*/