사파리,오페라,크롬,파이어폭스에서는 메뉴간 간격이 5px
익스에서는 더블마진으로 메뉴간 간격이 5px를 넘어섬!!
7px의 간격이 생기는 듯!!!
이런 걸 용어상 더블마진이라고 하던데..
늘 부딪히는 문제지만, 매번 -_- 해결방법을 찾고 있는 ㅠㅠ
라운드 처리 때문에 css코드가 상당히 길다능..
익스 하위 버전에서는 라운드 처리가 안될테다.. filter를 빼버려서 ㅎㅎ
<style type="text/css">
li {list-style:none;}
#nav {
margin:0;
padding:0;
*zoom:1;
}
#nav:after {
content:'';
content:none;
clear:both;
display:block;
}
#nav li {
display:inline-block;
margin-bottom:10px;
padding:0 15px;
font:bold 14px/23px "돋움", dotum, "굴림",gulim;
height:45px;
line-height:45px;
border-width:1px;
text-align:center;
text-decoration:none;
background-color: #999;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
color:#333;
}
#nav a{
text-decoration:none;
color:#fff;
}
#nav li:link,
#nav li:visited {
background-color: #ccc;
border-radius:5px;
border-width:1px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
color:#333;
}
#nav li:hover,
#nav li:active {
background-color: #f33f2a;
border-radius:5px;
border-width:1px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
color:#fff;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://malza.com">menu1</a></li>
<li><a href="http://malza.com">menu2</a></li>
<li><a href="http://malza.com">menu3</a></li>
<li><a href="http://malza.com">menu4</a></li>
<li><a href="http://malza.com">menu5</a></li>
</ul>
</body>
</html>
li에 *font-size:0; *line-height:0; 적용하면 문제가 해결된다고 하던데 난 안된다..
코드가 뒤죽여서 그런 것일 수도
li에 한 줄로 나오게 하기 위해 display:inline-block; 을 줬는데 float:left;을 추가해주면 의도치 않은 벌어짐 간격은 정리가 된다.
#nav li {
float:left; <--추가
display:inline-block;
margin-bottom:10px;
padding:0 15px;
font:bold 14px/23px "돋움", dotum, "굴림",gulim;
height:45px;
line-height:45px;
border-width:1px;
text-align:center;
text-decoration:none;
background-color: #999;
...
사파리,오페라,크롬,파이어폭스
익스11
익스7
상위를 사용중인데도 더블마진값은 사라지지 않네 ㅠㅠ
css 리셋을 안해줘서 그런가...훔..
쨋든...
간격을 다시 늘리기 위해서
#nav li {
float:left;
display:inline-block;
margin-right:5px; <--추가
margin-bottom:10px;
padding:0 15px;
font:bold 14px/23px "돋움", dotum, "굴림",gulim;
height:45px;
line-height:45px;
border-width:1px;
text-align:center;
text-decoration:none;
background-color: #999;
...
최종적으로 li에서 가로로 정렬하기 위해서는 display:inline-block;를 쓰는 것 보다 float:left; 를 사용하는 게 수월하다..ㅋㅋㅋㅋㅋㅋ
굳이 float:left;를 쓰는데 display:inline-block; 쓸 필요는 없는 듯 빼도 결과는 똑같음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<meta http-equiv="content-language" content="ko" />
<meta name="viewpoint" content="winth=device-width, initial-scale=1.0, user-scaleable=no">
<title></title>
<style type="text/css">
li {list-style:none;}
#nav {
margin:0;
padding:0;
*zoom:1;
}
#nav:after {
content:'';
content:none;
clear:both;
display:block;
}
#nav li {
float:left;
margin-right:5px;
margin-bottom:10px;
padding:0 15px;
font:bold 14px/23px "돋움", dotum, "굴림",gulim;
height:45px;
line-height:45px;
border-width:1px;
text-align:center;
text-decoration:none;
background-color: #999;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
color:#333;
}
#nav a{
text-decoration:none;
color:#fff;
}
#nav li:link,
#nav li:visited {
background-color: #ccc;
border-radius:5px;
border-width:1px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
color:#333;
}
#nav li:hover,
#nav li:active {
background-color: #f33f2a;
border-radius:5px;
border-width:1px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
color:#fff;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="http://malza.com">menu1</a></li>
<li><a href="http://malza.com">menu2</a></li>
<li><a href="http://malza.com">menu3</a></li>
<li><a href="http://malza.com">menu4</a></li>
<li><a href="http://malza.com">menu5</a></li>
</ul>
</body>
</html>
*혼자 메모형식으로 정리 한 것이니 틀린 부분은 지적해주시면 감사히 배움 받겠습니다 ^^;
'기타 웹스킬 > css' 카테고리의 다른 글
| 익스7에서 display:line-block; (0) | 2015.06.12 |
|---|