Mozilla 한국 커뮤니티

웹표준 공부겸, 홈페이지를 제작하던중..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`으로 적용 했습니다.

본래(?) 이런 문제가 있는 것인지 아니면, 제가 잘못 사용 하고 있는지 명쾌한 해답 부탁 드립니다~

서로다른 브라우져에서의 높이 가 다르게 나올때 대처방법.
1. font-size 를 설정해준다.
2. line-height 를 설정해준다.
위의 방법으로도 안되면 또다른 대안을 찾아야 할듯 싶습니다.

IE6과 IE7에 있는 버그입니다. 다양한 해결책이 있지만 제가 가장 추천하는 방법은 li를 플로트시키는 것입니다.

Code: Select all

<!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>

li를 플로트시키면서 ul에서 overflow로 클리어 시켰습니다. li를 플로트 시킬 수 없는 상황이면 다른 해결책을 찾아봐야 겠지만 보통은 큰 문제 없습니다.

Mozilla 한국 커뮤니티

<li>에 height 속성에 단위(?)

<li>에 height 속성에 단위(?)

Re: <li>에 height 속성에 단위(?)

Re: <li>에 height 속성에 단위(?)