|
|
|
질문1) 위에처럼 html 을 구성할 경우 li 에 있는 이미지와 하단 선사이에(ul에 지정) 약 4px 정도 공백이 생깁니다.
li 에 직접 height 를 주면 해결되긴 한데 height 를 주지 않고 border-bottom 이 딱 붙게 할 수 있는 방법이 있을까요?
답변1) 이미지 4px정도 여백은 영어에 아랫첨자가 있기 때문입니다. (EX: 영소문자 g 또는 j 등등)
이와 같은 문제는 FF(파이어폭스)에서도 마찬가지이며 해결 방안으로는
<img>태그에 style img {vertical-align: top;}을 주어서 해결이 가능합니다.
질문2) 위의 li 태그에서 style 을 삭제하고 스타일에 img {vertical-align: middle;}
을 추가하면 li에 들어있는 이미지가 border-bottom위로 1px 내려 옵니다.
ul에 height 를 지정하면 정상적으로 보이나 파폭에서 1px 띄어져서 보이네요.
어떤 방법으로 해결할 수 있을까요?
답변2) 질문 2번 문제는 vertical-align 문제가 아닌거 같습니다.
일단 li 태그에 float: left;가 됨으로써 ul의 높이값이 사라지기 때문에 검은색 선이 위로 올라가게 됩니다.
하지만 IE에서는 정상으로 나오죠. IE 버그입니다.
그럼 해결 방안을 드리자면
아래와 같은 소스가 될듯 싶네요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
</head>
<style type="text/css">
* {margin: 0px; padding: 0px;}
ul, li, dl, dt, dd {list-style: none;}
ul {width: 500px; border-bottom: 2px #000000 solid; overflow: auto; height: 100%;}
ul li { float: left;border: 1px solid #f18;}
ul li img {vertical-align: top;border: 0;}
</style>
<body>
<ul>
<li><img src="test.gif" /></li>
<li><img src="test.gif" /></li>
</ul>
</body>
</html>
질문 1은 영문의 아래첨자의 의한 문제이고
질문 2번은 CSS의 float 속성의 의한 것입니다.
자세한 설명을 하자면 단순히 이 소스를 가지고 이해 시켜드리기가 어렵네요.
답변 주시면 자세한 설명 해 드리겠습니다.
HTML 및 CSS속성은 http://trio.co.kr/ 찾아보심 될듯 싶습니다
[출처] 파이어폭스 와 ie간의 여백차이|작성자 jidusdl
'Web Programming > HTML & Javascript' 카테고리의 다른 글
| CSS 템플릿 모음 사이트 (1) | 2009.11.12 |
|---|---|
| 네이버, 야후, 구글지도 좌표구하는 사이트 (0) | 2009.06.19 |
| escape,encodeURI,encodeURIComponent의 차이점 (2) | 2009.04.08 |
| Jquery 플러그인 모음 (2) | 2009.04.08 |
