CSS inline-block 속성은 다양한 브라우저와 호환되며 수평 간격 문제에 대한 솔루션입니다.

이 장에서는 브라우저 간 CSS 인라인 블록 속성 호환성과 수평 간격 문제에 대한 솔루션을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

inline-block 속성 설명:

이 값을 설정하면 개체 자체는 인라인 개체로 렌더링되지만 개체 내의 내용은 블록 상자로 렌더링됩니다. 즉, 이 값이 설정된 요소는 블록 상자를 포함할 수 있는 인라인 상자 요소와 동일합니다. IE6과 7은 inline-block을 지원할 수 있지만, 그들이 보기에 display:inline-block은 레이아웃을 트리거하기 위한 조건일 뿐 W3C에서 지정한 것이 아닙니다. 그러나 IE의 레이아웃을 사용하여 display:inline-block의 효과를 시뮬레이션할 수 있습니다.

다양한 브라우저를 위한 인라인 블록 호환 솔루션

두 가지 방법이 있습니다. 둘 다 IE의 레이아웃을 먼저 트리거한 다음 다음과 같이 블록 요소 자체가 인라인 객체로 렌더링되도록 display:inline을 정의합니다.

1. 레이아웃을 실행할 수 있는 모든 속성 중에서 position:absolute 및 float와 width 및 height를 제외하고 사용할 수 있는 속성은 다음과 같이 display:inline-block뿐입니다. 두 개의 디스플레이를 차례로 배치해야 합니다. 두 개의 CSS 문만 효과가 있습니다. display:inline-block을 먼저 정의한 다음 디스플레이를 다시 인라인 또는 블록으로 설정하면 레이아웃이 사라지지 않습니다.

2. 첫 번째 방법은 두 개의 CSS 문에 넣는 것입니다. IE 레이아웃에도 Zoom:value가 있습니다.

fn-ib{display:inline-block;}fn-i{*display:inline;}

위에서 볼 수 있습니다. IE6, 7은 inline-block 속성을 지원하지만 W3C 효과를 구현하지 않으므로 inline-block 속성의 효과를 시뮬레이션하기 위해 레이아웃과 display:inline을 사용합니다.

자, 이제 다양한 브라우저에서 인라인 블록 문제를 해결하는 솔루션이 있습니다. 다음 솔루션은 다음과 같습니다. 다양한 브라우저에서 다음 예를 살펴보세요.

다른 브라우저에서는 인라인 블록 요소에 간격이 있습니다. 이는 버그가 아니라 인라인 자체의 특성입니다

그런 다음 우리는 display:inline-block 속성을 지원하는 브라우저에서 IE67 및 IE에서 인라인 및 블록 요소 모두 display:inline-block 다음에 가로 간격이 발생한다는 것을 발견했습니다. (Q) 시뮬레이션 display:inline-block 이후에는 두 가지 상황이 있습니다. 시뮬레이션 후의 블록 요소에는 간격이 없고 인라인 요소에는 간격이 있습니다. 왜? 여기에 또 다른 지식 포인트가 있습니다. 인라인 요소는 기본적으로 간격을 두고 배열됩니다. 따라서 위 현상은 다음과 같이 설명됩니다.

display:inline-block 속성을 지원하는 브라우저에서는 요소 자체가 인라인 요소와 동일하므로 블록이 설정되어 있음에도 불구하고 시뮬레이션된 솔루션의 최신 브라우저에는 공백이 있습니다. 요소의 display:inline을 사용하면 인라인 요소처럼 수평으로 배열할 수 있지만 블록 요소는 여전히 블록 요소이고 실제로 인라인 요소가 되지 않으므로 간격이 없습니다.

공백의 근본 원인은 HTML의 줄바꿈, 공백, 탭 등과 같은 문자가 공백 문자를 생성하기 때문입니다.

인라인 블록 사이의 가로 간격 문제 해결 위에서 공백의 근본 원인은 HTML의 줄 바꿈, 공백, 탭 등과 같은 문자라는 것을 알고 있으므로 태그와 태그를 넣습니다. 그 사이의 공간을 없애면 문제가 없을까요? 따라서 코드는 다음과 같습니다.

HTML 코드는 다음과 같습니다.

fn-ibz{display:inline-block;*display:inline;*zoom:1}

Rendering:

DOM 구조를 변경하여 인라인 블록 간의 간격 문제를 해결합니다.

위의 DEMO 코드를 처리했으므로 다음을 수행해 보겠습니다. 살펴보세요. 여유 공간이 충분하지 않습니다. 하지만 문제는 다음과 같습니다.

정적이라면 실제로는 큰 문제가 없습니다. 백그라운드에서 직접 생성된다면 어떨까요? 아니면 앞으로 유지 관리 동료가 코드가 어떻게 이런 식으로 작성되었는지 확인하고 다시 변경할 것입니다. 따라서 CSS를 사용하여 문제를 해결하는 것이 여전히 가장 좋은 방법입니다. 이 상황을 처음 봤을 때 내 첫 번째 반응은 마이너스 마진을 사용하여 문제를 해결하는 것이었습니다. 나중에 격차의 근본 원인을 알게 된 후에는 마이너스 마진 방법으로 문제를 해결할 수는 있지만 공백의 원인은 HTML 문자, 공백, 탭 및 기타 문자 사이의 줄 바꿈이며 글꼴 크기와 같은 속성의 변경에 따라 공백이 변경됩니다. 따라서 CSS를 사용하여 문자 크기를 제어하여 찾을 수 있습니다. 그래서 YUI3의 솔루션을 참조하여 다음 코드를 얻었습니다.

<div class="parent">
    <strong class="fn-ibz">内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong><strong class="fn-ibz">
    内联元素</strong>
</div>
<div class="parent">
    <div class="fn-ibz">块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div><div class="fn-ibz">
    块元素</div>
</div>

Rendering:

CSSinline-block gap 솔루션

그런 다음 각 코드 줄의 역할을 분석합니다.

1. 글꼴 크기의 역할: 물론 문자에 의해 발생하므로 글꼴 크기를 0으로 설정한 다음 요소의 글꼴 크기를 다시 원래 크기로 설정합니다. IE6, 7 및 낮은 버전의 Chrome 및 Safari가 설치된 기타 브라우저를 제외하고 이 단계에서 인라인 블록 간격이 사라집니다(낮은 버전의 Chrome에서는 글꼴 크기:0을 설정한 후 텍스트를 자유롭게 확장 및 축소할 수 없으므로 허용되지 않습니다). 권장)

2. 단어 간격의 역할: IE6, 7 및 IE(q) 모드에서는 항상 1px의 간격이 있으며, 이를 해결하기 위해 word-spacing:-1px를 사용합니다(단어 사이의 거리). 는 영어에만 유용하며 중국어에는 단어 개념이 없습니다) 그런 다음 요소를 다시 일반으로 설정합니다. 물론 margin:0 0 0 -1px; 을 사용하는 것도 가능합니다. (코드가 적은 것 같네요...)

3. letter-spacing의 역할: 낮은 버전의 크롬과 사파리만 남습니다. 문자 간격은 텍스트를 조정하는 방법 중 하나이며 문자 간격, 글꼴 크기, 글꼴 모음 및 브라우저마다 다르므로 "문자 간의 관계에 대한 데이터 테이블"의 데이터에 따라 설정하십시오. -간격 및 글꼴 크기/글꼴"을 선택하고 간격을 취소할 수 있습니다. 그러다가 띄어쓰기와 단어 띄어쓰기를 함께 사용하면 문제가 발생하기 쉽기 때문에 *letter-spacing:normal; 코드를 추가했습니다.

4. vertical-align:top의 역할: 마지막 것은 간격과 관련이 없습니다. Vertical-align:top을 설정하는 것은 인라인 블록 요소를 상단 기준선에 정렬하는 것입니다. 수직 정렬 속성은 인라인 및 인라인 블록 요소에서만 유효합니다.
   

인라인 블록의 장점

인라인 블록 레이아웃이 플로팅 레이아웃보다 브라우저 리소스를 절약한다는 점은 말할 것도 없고, 우리는 플로팅 레이아웃을 버리고 인라인 블록 레이아웃을 수용해야 합니다(공식 웹사이트는 그렇지 않습니다) 이 말) 결국 사물의 모양에는 그 의미가 있고, 플로팅 레이아웃은 가장 널리 알려진 레이아웃 방식이기도 합니다. 그래서 다시 특정 상황을 자세히 분석해 보면 플로팅 레이아웃 구조가 더 명확하다는 것이 분명하지만 인라인 블록 레이아웃이 실제로 가장 적더라도 인라인 블록을 사용하고 중복 코드를 많이 추가해야 합니다. 전설적일 정도로 리소스를 많이 소모하지만, HTML 코드가 늘어나면 리소스도 소모하지 않을까요?

있다고 해도 별거 아닌 것 같아요. 따라서 절대 위치 지정을 사용하는 경우에는 절대 위치 지정을 사용하고, 부동을 사용하는 경우에는 부동을 사용하고, 인라인 블록을 사용하면 문제를 더 잘 해결할 수 있는 상황이 발생하면 과감하게 사용하십시오. 결국 인라인 블록은 부동 및 절대 위치 지정에 비해 여전히 몇 가지 장점이 있습니다.

1. 수직 정렬과 텍스트 정렬을 사용하여 수직, 수평, 양면, 기준선 등의 정렬을 구현할 수 있으며 적응형이기도 합니다.

2. 그 나름의 이유 때문에 특히 유동적인 레이아웃에 적합합니다. 높이와 너비는 고정할 필요가 없습니다.

위 내용은 CSS inline-block 속성은 다양한 브라우저와 호환되며 수평 간격 문제에 대한 솔루션입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!