출처 : http://view83.tistory.com/43
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<style type="text/css">
*{font-weight:bold; font-size:15px; font-family:verdana;}
div{border:3px solid #666; padding:5px; margin:0 0 10px 0;}
h1{font-size:20px;}
.type01, .type02, .type03{border:3px solid red;}
.type01 *{display:inline-block;}
.type02 *{display:inline-block;}
.type03 *{display:inline-block;}
</style>
</head>
<body>
<h1>브라우저별 inline-block 테스트</h1>
<div>
<h2>inline 요소</h2>
<div class="type01">
<span>item01</span>
<span>item02</span>
<span>item03</span>
<span>item04</span>
</div>
</div>
<div>
<h2>block 요소</h2>
<div class="type02">
<div>item01</div>
<div>item02</div>
<div>item03</div>
<div>item04</div>
</div>
</div>
<div>
<h2>inline 요소 _ block 요소</h2>
<div class="type03">
<span>item01</span>
<span>item02</span>
<div>item03</div>
<div>item04</div>
</div>
</div>
</body>
</html>
이것을 브라우저별 화면 테스트를 하게되면
ie6, ie7에서 묘한 결과를 보여준다
block요소에는 display:block과 같은 결과를 보여주는것이다.
그 외에 브라우저에서는 ie8, 파폭 오페라 사파리
전부다 흐르는것처럼 제대로 정상 처리되는것을 볼수있다.
ie6, ie7이 문제다!!!!!!!
이것을 해결하려면
뭐 핵을 사용해야지
<style type="text/css">
*{font-weight:bold; font-size:15px; font-family:verdana;}
div{border:3px solid #666; padding:5px; margin:0 0 10px 0;}
h1{font-size:20px;}
.type01, .type02, .type03{border:3px solid red;}
.type01 *{display:inline-block;}
.type02 *{display:inline-block; *display:inline; *zoom:1;}
.type03 *{display:inline-block;}
</style>
---------------------------------------------------------------------------------------------------------------------
- 인라인 요소이건 블럭요소이건, 보이는 형태는 인라인 요소처럼 보이되, 속성은 블럭요소 처럼 (상하 패딩이나 상하 마진 및 width, height 값을 지정해 줄 수 있는) 쓰이게 하는 속성이라 할 수 있을것 같다.
다만, 인라인 요소에 inline-block을 줬을 때는 모든 브라우저의 결과 값이 같지만,
블럭요소에 inline-block을 줬을 때는 ie6,7에는 적용되지 않기때문에 위의 핵을 써줘야 한다.
'# Work > HTML/CSS' 카테고리의 다른 글
| ie6에서 png 이미지 투명하게 처리하기 (0) | 2011.06.10 |
|---|---|
| 플래시가 겹쳐 보일 때 (0) | 2011.06.08 |
| filter:alpha 반투명 효과주기 (0) | 2011.04.26 |
| min-height ie6 에서 핵 없이 사용하기 (0) | 2011.03.29 |
| <abbr>과 <achronym> (0) | 2011.03.24 |