[ie] ie6 display:block Bug
list 태그를 사용할 때 a에 배경효과를 주기 위해서 아래와 같은 코드를 많이 사용하지요.
<!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>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{margin:0;padding:0;}
ul li a{display:block;border:1px solid red;}
</style>
</head>
<body>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 1</a></li>
</ul>
</body>
</html>
그럼 이제 ie6와 비교해 볼까요-ㅅ-);
역시 우리를 실망시키질 않아요...
해결법은 몇가지가 있는데요.
1. a 태그를 display:inline-block;를 시킨다.
- 이 경우는 width:100%;가 되지 않기 때문에 고정된 width를 넣어 주시거나 100%를 넣어 주셔야 합니다.
- 100%경우에는 padding에 관한 계산이 어렵기 때문에 추천안해요.
2. a 태그에 float:left와 clear:left를 추가 한다.
- float를 해제를 해야한다는 번거로움이 있고, width 잇슈가 1번과 같죠.
3. li 태그에 border 속성을 사용한다.
- li에 선이 들어가는 디자인이 아니면 OTL
4. a 태그에 height:1%를 집어 넣는다.
- 네 이거 쓰세요.
그럼 ㅂㅂㄴㅂㅂㄴ
댓글
댓글 쓰기