크로스브라우징 문제, 2가지 질문드립니다.
관련링크
http://seelgi.dothome.co.kr
226회 연결
본문
고수님들께 질문드립니다.
웹개발 초보여서 크로스브라우징은 거의 걸음마 단계입니다.
그누보드5로 작업했고
만든 홈페이지가 크롬이나 사파리, 익스플로러 10이상은 모두다 정상으로 나오는것을 확인한 상태입니다.
그런데.. 익스플로러 9이하부터 틀이 이상하게 틀어지는 현상이 생기는 것을 확인하고,
고수님들께 도움을 청합니다. ㅜㅜ
1. 사이트맵 페이지에서 이상하게 아래로 밀리는 현상이 일어납니다.
2. 메뉴 롤오버시 이상하게 line-height가 넓어지는 현상이 일어납니다. 고수님들 도와주세요. ㅜㅜ
1. 첫번째 질문 이미지 및 코드
정상적인 화면
ie9이하에서 아래로 밀리는 사이트맵 페이지... 일단은 위메뉴부분은 head.php
아래 푸터부분은 tail.php로 되어있고,
사이트맵 메인화면은 page4.php로 되어있습니다.
page4.php코드 붙여드립니다.
<?
include_once("./_common.php");
include_once(G5_PATH.'/head4.php');
?>
<!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>
<style>
@charset "UTF-8";
/* CSS Document */
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
@font-face{
font-family:NanumGothic;
}
*{font-family:NanumGothic,나눔고딕,ng,sans-serif;}
A:link {text-decoration:none; color:#333;}
A:visited {text-decoration:none; color:#333;}
A:active {text-decoration:none; color:#333;}
A:hover {text-decoration: none; color:#0084d7;}
.sitemap{width:100%;
position:relative;
min-height:600px;
margin:0 auto;}
.map{width:25%; height:auto;
float:left;
margin-left:3%;
margin-right:5%;
min-height:300px;}
.map1{
margin: 0;
padding-left:15px;
font-size:18px;
color: #000;
display:compact;
border-bottom:2px solid #000;
padding-bottom:10px;
}
.map0{
font-size:14px;
color:#666;
list-style:none;
padding:5px;
padding-bottom:10px;
}
.map_li{
min-width:50px;
padding:8px;
display:compact;
border-bottom:1px solid #666;
}
</style>
<title>사이트맵</title>
</head>
<body>
<div class="sitemap">
<div class="map">
<h2 class="map1"><a href="http://seelgi.dothome.co.kr/index.php">홈</a></h2>
<ul class="map0">
<a href="http://seelgi.dothome.co.kr/bbs/register.php"><li class="map_li">회원가입</li></a>
<a href="http://seelgi.dothome.co.kr/bbs/login.php"><li class="map_li">로그인</li></a>
<a href="http://seelgi.dothome.co.kr/adm.php"><li class="map_li">관리자</li></a>
<a href="http://seelgi.dothome.co.kr/page4.php"><li class="map_li">사이트맵</li></a>
</ul>
</div>
<div class="map">
<h2 class="map1"><a href="http://seelgi.dothome.co.kr/page1.php">인사말</a></h2>
</div>
<div class="map">
<h2 class="map1"><a href="http://pill.dothome.co.kr/page2.php">포트폴리오</a></h2>
</div>
<div class="map">
<h2 class="map1"><a href="http://pill.dothome.co.kr/page3.php">디자인의뢰</a></h2>
<ul class="map0">
<a href="http://seelgi.dothome.co.kr/page3.php"><li class="map_li">이용안내</li></a>
<li class="map_li">의뢰게시판</li></a>
</ul>
</div>
<div class="map">
<h2 class="map1"><a href="http://seelgi.dothome.co.kr/bbs/board.php?bo_table=notice">커뮤니티</a></h2>
<ul class="map0">
<a href="http://seelgi.dothome.co.kr/bbs/board.php?bo_table=notice"><li class="map_li">공지사항</li></a>
<a href="http://seelgi.dothome.co.kr/bbs/board.php?bo_table=qa"><li class="map_li">문의사항</li></a>
<a href="http://seelgi.dothome.co.kr/bbs/board.php?bo_table=reply"><li class="map_li">이용후기</li></a>
</ul>
</div>
<div class="map"><h2 class="map1"><a href="http://pill.dothome.co.kr/bbs/board.php?bo_table=reply1">방문록</a></h2>
<ul class="map0">
<a href="http://seelgi.dothome.co.kr/bbs/board.php?bo_table=study"><li class="map_li">학습게시판</li></a></ul>
</div>
</div>
</body>
</html>
<?
include_once(G5_PATH.'/tail.php');
?>
2. 두번째 질문 이미지
정상적인 롤오버서브메뉴
ie9이하에서 행간이 넓어지는 서브메뉴line-height가 달라지는것같은데..
어떻게 해야할지 모르겠습니다.
도와주세요.. ;
답변 1
홈페이지 방문해서 확인해보니 여러 가지 문제가 있네요.
1. ie9 이하에서 아래로 밀리는 사이트맵 페이지
head, tail 파일에는 <doctype>, <html>, <head>, <body> 태그가 있을텐데
page4.php에서 중복되는 태그를 지우셔야 합니다.
그리고 스타일시트나 자바스크립트 파일을 불러와야 할 경우
<?php
include_once("./_common.php");
add_stylesheet('<link href="경로" />');
add_javascript('<script src="경로"></script>');
?>
2. ie9 이하에서 행간이 넓어지는 서브메뉴
행간에 문제가 아니라 태그 작성이 잘못되어 이상하게 인식을 하네요.
<ul> 태그 자식은 무조건 <li> 태그가 먼저 와야 합니다.
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
</ul>
상위 브라우저에서 잘보인다고 정상적인 화면이 아닙니다.
잘못된 부분이 있더라도 알아서 해석하여 보여주기 때문이죠.
오히려 하위 브라우저가 더 정확하다고 생각하시면 되요.
(물론 ie 버전별 스타일 문제가 많지만요 ^^;)
W3C 권고사항에 의하면 태그는 의미에 맞게 작성해야 하므로..
주 메뉴부분은 <div>태그보다는 목록 태그(ul, ol, dl)을 사용해야 하고,
서브메뉴의 스타일은 position: relative 보다는 absolute로 변경하세요.
메뉴가 길어지면 콘텐츠 부분이 아래로 밀려 내려가면 안되잖아요 ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.
