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

요즘에는 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에서 해당 요소에 포함된 링크를 클릭할 수 없게 됩니다. . 이를 해결하려면 위치:상대적 사용이 필요합니다.

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

코드 복사 코드는 다음과 같습니다.

display:inline-block; /*Firefox3 베타, IE8 베타, Opera, Safari 지원, IE에서 인라인 요소를 실행하는 hasLayout*/
display:-moz-inline-stack; 개인 속성도 사용 가능 -moz-inline-box 사용 */

zoom:1; /*IE에서 hasLayout 트리거*/
*display:inline; /*IE에서 hasLayout이 트리거되면 설정 인라인에 대한 블록 요소는 display:inline을 display:inline-block*/

text-indent:-9999px
*text-indent:
font-size:0;과 유사하게 만듭니다. ;
line -height:0; /* 텍스트를 숨겨야 하는 경우 다음 네 가지 속성을 사용할 수 있습니다. */
/*또한 위의 텍스트를 숨기려면 더 간단한 방법을 사용할 수도 있습니다. -height: 매우 큰 값;font-size:0 ; */

overflow:hidden; /* 오버플로 내용 숨기기 */

vertical-align:middle; , Opera의 상대적으로 큰 편차의 경우 */

width:? px; /*? 자동이 아닌 값*/
height:? px; /*? 자동이 아닌 값*/