1 년 전, 인터넷에 인라인 블록 속성에 대한 기사는 없었습니다. 모든 사람이 속성을 더 잘 이해하도록 촉진하기 위해 "Depth : Display : Inline-Block에 대한 심도있는 이해"기사를 요약하고 편집했습니다.
이제 인라인 블록 속성의 적용에 대한 수요가 증가하고 있습니다. 불행히도, Firefox3 베타, IE8 베타, 오페라 및 Safari만이 인라인 블록 속성을 지원하지만 (참고 : 오페라와 Safari 만 지원 함) IE6 및 IE7은 해당 Haslayout을 트리거하여 시뮬레이션 할 수 있습니다. Firefox2에는 -moz-inline-box 및 -moz-inline-stack private 속성이 있습니다 (이 두 속성의 비교는 Qin GE의 "디스플레이의 두 가지 예 : 인라인-블록"에서 인용됩니다).
실제 애플리케이션에서-Moz 인라인-박스는 요소 간의 정렬과 같은 문제가 있습니다. Firefox는 또한 정렬 문제를 해결하는 데 도움이되는 사유지-Moz-Box-Align을 가지고 있지만 여전히 많은 문제를 예측하기가 어렵습니다. 비교적 말하면 -moz-inline-stack은 Inline-Block과 같은 성능을 발휘하며 Firefox3에서 테스트 할 수 있습니다. 그러나 -moz-inline-stack을 사용할 때 버그도 있습니다. 디스플레이의 외부 요소 인 경우 : -moz-inline-stack; 표시됩니다 : 인라인; Firefox에 포함 된 링크를 불분명하게 만들 수 있으며 위치에 따라 해결해야합니다.
우리가 시뮬레이션 한 최종 코드는 다음과 같습니다.
디스플레이 : 인라인 블록; /*firefox3 베타, ie8 베타, 오페라, 사파리 지원, haslayout ie*/아래에서 인라인 요소를 트리거합니다.
디스플레이 : -moz-inline-stack; / * Firefox의 개인 속성은 -Moz-inline-box */를 사용할 수도 있습니다.
줌 : 1; /*즉, 트리거 haslayout*/
*디스플레이 : 인라인; /*일단 HASLAYOUT가 IE에서 트리거되면 블록 요소를 인라인으로 설정하면 디스플레이가 표시됩니다. 디스플레이와 유사한 인라인 효과 : 인라인 블록*/
텍스트 안정 : -9999px;
*텍스트 안정 : 0;
글꼴 크기 : 0;
라인 높이 : 0; /* 텍스트를 숨기려면이 네 가지 속성을 사용할 수 있습니다*/
/*또한, 위에 숨겨진 텍스트는 숨겨 질 수 있으며보다 단순화 된 방법을 사용할 수 있습니다. 선 높이 : 초대형; 글꼴 크기 : 0; */
오버플로 : 숨겨진; /* 오버플로 콘텐츠 숨기기*/
수직 정상 : 중간; /* 오페라의 더 큰 편차를 위해 라인 내의 수직 센터링*/
너비:? px; /*? 비 자수 가치*/
키:? px; /*? 비 자수 가치*/