CSS 디스플레이 인라인 블록 호환성 문제 작성 방법

오늘 레이아웃을 작성하다가 버그를 발견했습니다. 이렇게 하지 않으면 기대한 효과를 얻을 수 없으며 ie6과 ie7은 지원하지 않는 것으로 나타났습니다. display: 인라인 블록이므로 CSS 해킹을 사용해야 합니다. 호환성:
IE6 및 IE7은 인라인 블록을 인식하지 못하지만 블록 요소를 트리거할 수 있습니다.

다른 주류 브라우저는 인라인 블록을 지원합니다.

IE6과 IE7의 호환성 문제 해결 방법:

1. 먼저 레이아웃의 특성을 갖는 inline-block 트리거 블록 요소를 설정한 다음, 블록 요소가
인라인 요소로 나타나도록 display:inline을 설정합니다. 이때 레이아웃의 특성은 사라지지 않습니다.
2. display:inline을 직접 설정하고 Zoom:1을 사용하여 레이아웃을 실행합니다.

모든 브라우저와 호환:

CSS Code클립보드에 콘텐츠 복사

1. display:inline-block; / * 최신 브라우저 +IE6, 7 인라인 elements */

2. *

   display:inline; /* IE6, 7 block elements */

3. *zoom:1

다음은 간략한 소개입니다.

1.
예시
Effect

2.display:inline-block의 기능은 무엇인가요?

인라인 요소나 블록 요소를 인라인 블록으로 만들려면 display:inline-block 속성을 사용하세요. , 간단하고 간단하게 말하면 float 속성을 추가하지 않고도 너비와 높이를 자체적으로 정의할 수 있으며 동시에 해당 요소는 상위 요소의 중앙에 쉽게 표시될 수 있습니다!

3.display:inline-block은 언제 사용되나요?

웹사이트 레이아웃에서는 자식 요소에 스팬 또는 블록 요소 li 태그와 같은 인라인 요소가 사용되는 경우가 많으며 태그 수는 가변적입니다. 이 블록이 얼마나 많은지에 관계없이 중앙에 표시되기를 원합니다(하위 요소의 전체 너비는 가변적입니다)! 이것이 바로 display:inline-block이 유용한 곳입니다!

4. ie6/7은 display:inline-block 속성을 지원합니까?

인라인 요소에 display:inline-block 속성을 정의하고 IE6 및 IE7의 표시 효과가 다른 브라우저와 일치하는지 확인하지만 사실 ie7 이하 버전의 ie 브라우저
는 표시를 지원하지 않습니다. 인라인- 이 속성을 차단하세요!
정확한 설명은 "inline-block 속성을 사용하면 IE에서 레이아웃이 실행되므로 요소에 설정된 너비와 높이가 적용되므로 표시 효과가 다른 브라우저와 일치한다고 말할 수 없습니다." /7은 디스플레이:인라인 블록을 지원합니다! 5. 인라인 요소는 표시:인라인 블록만 정의하면 되며 표시 효과는 모든 브라우저에서 동일합니다. IE7에서 블록 요소에 대한 표시:인라인 블록의 효과를 얻는 방법은 무엇입니까? ?

IE에서 display: inline-block은 요소의 레이아웃만 트리거합니다. 예를 들어, display: inline-block을 p로 설정하면 p가 블록 요소의 특성(너비, 높이 등을 설정할 수 있음)을 갖도록 보장할 수 있지만 여전히 줄 바꿈이 발생합니다. 다음으로 줄 바꿈이 발생하지 않도록 display: inline을 설정합니다. 동일한 스타일에 display:inline-block;*display:inline;을 작성합니다. inline-block 속성은 요소의 레이아웃을 트리거하지 않으므로 레이아웃을 트리거하려면 *zoom:1을 추가해야 합니다! IE7의 블록 요소는 어떻게 display:inline-block 쓰기 방법과 호환될 수 있나요?


실제로 효과적인 두 가지 방법이 있습니다.

방법 1: 블록 요소를 인라인 객체로 직접 설정하고(display:inline 속성 설정) 블록 요소의 레이아웃을 트리거합니다(예: 확대/축소: 1 등). 다양한 브라우저와 호환되는 코드는 다음과 같습니다. p {display:inline-block;*display:inline; *zoom:1;...} 방법 2: 먼저 display:inline-block 속성을 사용하여 블록 요소를 트리거합니다. , 그리고 display:inline을 정의하면 블록 요소가 인라인 객체로 렌더링될 수 있습니다(두 개의 디스플레이가 두 개의 CSS 스타일 선언에 배치되어야 효과적입니다. 이는 IE의 전형적인 버그입니다. display:inline-block이 먼저 정의된 경우, 그런 다음 디스플레이를 다시 인라인 또는 블록으로 설정하면 레이아웃이 사라지지 않습니다. 코드는 다음과 같습니다(...다른 속성은 생략됨): p {display:inline-block;...}p {*display:inline;}

7. 디스플레이:인라인 블록 요소 ?


display: 인라인 블록 요소 사이에 추가 공백이 발생합니다. 이는 인라인 블록 자체의 특성입니다!
엄밀히 말하면 버그는 아닙니다.
font-size 설정을 사용하여 디스플레이:인라인 블록 요소 사이의 초과 공백을 해결하는 방법에 대한 관련 기사: http://www.jb51.net/ CSS/76707.html

위 내용은 CSS 디스플레이 인라인 블록 호환성 문제 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!