시뮬레이션 호환성을 위한 인라인 블록 속성_경험 교환

요즘에는 inline-block 속성 사용에 대한 요구가 점점 더 많아지고 있습니다. 아쉽게도 Firefox3 베타, IE8 베타, Opera, Safari만이 inline-block 속성을 지원하지만(참고: 원래는 Opera와 Safari만 지원했습니다) IE6 및 IE7은 Trigger hasLayout을 전달하여 시뮬레이션할 수 있습니다. Firefox2에는 -moz-inline-box 및 -moz-inline-stack 개인 속성이 있습니다(이 두 속성의 비교는 Qin Ge의 "디스플레이 적용의 두 가지 예:inline-"에서 인용됨). 차단하다").

실제 애플리케이션에서 -moz-inline-box에는 요소 간 정렬과 같은 문제가 있습니다. Firefox에도 정렬 문제를 해결하는 데 도움이 되는 전용 속성인 -moz-box-align이 있지만 여전히 예측하기 어렵습니다. 그리고 상대적으로 말하면 -moz-inline-stack은 Firefox3에서 테스트할 수 있는 inline-block처럼 동작합니다. 그러나 -moz-inline-stack을 사용할 때도 버그가 있습니다. display:-moz-inline-stack; 요소의 외부 요소가 display:inline;인 경우 Firefox에서 해당 요소에 포함된 링크를 클릭할 수 없게 됩니다. . 이를 해결하려면 위치:상대적 사용이 필요합니다.

시뮬레이션한 최종 코드는 다음과 같습니다.