웹표준 공부겸, 홈페이지를 제작하던중..ie8(+firefox)과 ie7에서 아래와 같은 문제가 있어 도움을 얻고자 문의 글 올려봅니다.
<ul>
<li>선택 1</li>
<li>선택 2</li>
<li>선택 3</li>
</ul>
<ul>
<li>선택 4</li>
<li>선택 5</li>
<li>선택 6</li>
</ul>
style
ul { list-style: none;}
li { display: block; width: 100px; height: 110%; }
문제는 height 에 `%`로 지정할때와 `em`으로 지정할때 서로 다르게 나오는 문제가 있습니다.
%로 할 경우에는 ie8, firefox 둘 다 유사(동일 하지 않았음)하게 랜더링 되었지만..
ie7에서는 문제가 있더군요.
그래서 어쩔 수 없이 ie7에는 다르게 나와.. ie7에만 `em`으로 적용 했습니다.
본래(?) 이런 문제가 있는 것인지 아니면, 제가 잘못 사용 하고 있는지 명쾌한 해답 부탁 드립니다~
<li>에 height 속성에 단위(?)
-
퍼블리
Re: <li>에 height 속성에 단위(?)
서로다른 브라우져에서의 높이 가 다르게 나올때 대처방법.
1. font-size 를 설정해준다.
2. line-height 를 설정해준다.
위의 방법으로도 안되면 또다른 대안을 찾아야 할듯 싶습니다.
1. font-size 를 설정해준다.
2. line-height 를 설정해준다.
위의 방법으로도 안되면 또다른 대안을 찾아야 할듯 싶습니다.
-
hyeonseok
- 해커
- 게시물: 691
- 참여됨: 2004 08 11 22:14 59
- 연락:
Re: <li>에 height 속성에 단위(?)
IE6과 IE7에 있는 버그입니다. 다양한 해결책이 있지만 제가 가장 추천하는 방법은 li를 플로트시키는 것입니다.
li를 플로트시키면서 ul에서 overflow로 클리어 시켰습니다. li를 플로트 시킬 수 없는 상황이면 다른 해결책을 찾아봐야 겠지만 보통은 큰 문제 없습니다.
코드: 모두 선택
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hello</title>
<style type="text/css">
ul {
list-style: none;
overflow: auto;
}
li {
width: 100px;
height: 1.1em;
float: left;
clear: left;
line-height: 1.3em;
background: #eee;
}
</style>
</head>
<body>
<ul>
<li>선택 1</li>
<li>선택 2</li>
<li>선택 3</li>
</ul>
<ul>
<li>선택 4</li>
<li>선택 5</li>
<li>선택 6</li>
</ul>
</body>
</html>누군가 접속
유저들이 이 포럼을 탐색중: 가입된 유저 없음 그리고 17 손님들