최근에 나는 새로운 웹 사이트를 구축하고 있었고 몇 가지 효과를 생각해 냈지만 구현 중에 이 인라인 블록과 같은 사소한 문제에 직면했습니다. 다행히 대부분의 문제가 해결되어서 공유하려고 글을 썼습니다.
웹 페이지를 만들 때 요소가 블록처럼 너비와 높이를 정의할 수 있고 일반 인라인처럼 연속적으로 실행될 수 있기를 바라는 경우가 있습니다. 예를 들어, 아래 그림에서 빨간색 선으로 표시된 곳은 다음과 같습니다.
일반적으로 우리는 이러한 효과를 얻기 위해 다음과 같은 코드를 사용합니다.
예제 소스 코드
[www.downcodes.com] 이렇게 하면 목표를 달성할 수 있지만 코드는 아직 충분히 세련되지 않고 유연하지 않습니다. 이상적인 방법으로는 다음 코드만으로 이를 달성할 수 있습니다.
예제 소스 코드
[www.downcodes.com] 이 경우 a 태그에 너비 높이와 배경 이미지를 지정해야 합니다. 그러나 a 태그의 기본 표시 속성은 인라인이며 너비와 높이가 유효하지 않습니다. 그리고 display:block이 a로 설정되면 너비와 높이 문제는 해결될 수 있지만 요소는 자동으로 줄을 끊고 필요한 효과를 얻을 수 없습니다. 자동으로 줄을 끊지 않고 높이와 너비를 설정할 수 있는 img 태그와 동일한 결과를 얻을 수 있는 방법이 있습니까?
대답은 '예'입니다. Opera와 Webkit은 CSS2 속성 표시인 inline-block을 지원합니다. 이 속성을 사용하면 Opera에서 필요한 효과를 완전히 얻을 수 있지만 다른 브라우저에서는 작동하지 않습니다.
표시 속성에는 덜 일반적으로 사용되는 값인 표시(inline-table)도 있습니다. 이 값을 사용하면 필요한 효과를 완전히 얻을 수도 있습니다. 이 속성은 IE를 제외한 모든 브라우저에서 올바르게 지원되지만... 또 IE입니다. CSS를 접하면 모든 웹 개발자들이 싫어하겠지만 IE를 포기하는 것은 사용자의 70%를 포기하는 것과 같기 때문에 우리는 여전히 다른 해결책을 찾아야 합니다.
어쩔 수 없이 구글링을 하다가 실제로 찾았습니다. 이 기사에서 지적한 대로, 먼저 IE의 hasLayout을 실행한 다음 해당 디스플레이를 인라인으로 설정하면 이 요소는 인라인 블록이 됩니다. 이러한 방식으로 IE의 이러한 불합리한 기능을 활용하고 일부 CSS와 결합할 수 있습니다. 다양한 브라우저와 호환되는 CSS 코드를 제공하는 해킹:
예제 소스 코드
[www.downcodes.com] .요소 클래스 {
display: -moz-inline-stack; //Firefox 전용 코드
display: inline-block; //일부 표준 브라우저
확대/축소: 1; //IE에만 해당
*display: inline; //IE만이 이 코드를 알고 있습니다(CSS 해킹)
}
이 코드를 통해 다양한 브라우저에서 일관되게 동작하는 인라인 블록을 구현할 수 있습니다. 그러나 이 방법에는 W3C CSS 검증을 통과할 수 없다는 작은 단점이 있습니다. 물론, 검증을 통과하는 방법도 매우 간단합니다. IE가 아닌 브라우저에는 inline-table 속성이 포함된 스타일 시트를 발행하고, IE용으로는 별도의 IE Only CSS를 발행할 수 있습니다.
