그누보드 QA - 크로스브라우징 문제, 2가지 질문드립니다.

크로스브라우징 문제, 2가지 질문드립니다.

울트라마린 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016.01.10 16:54:58 9386 (112.♡.♡.113)

답변 1

본문

고수님들께 질문드립니다.

웹개발 초보여서 크로스브라우징은 거의 걸음마 단계입니다.

그누보드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">

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

src:url(http://www.ssamokssamok.kr:8080/font/NanumGothic.eot);

}

*{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>

</head>

<body>

</ul>

</div>

</div>

<h2 class="map1"><a href="http://pill.dothome.co.kr/page2.php">포트폴리오</a></h2>

</div>

<h2 class="map1"><a href="http://pill.dothome.co.kr/page3.php">디자인의뢰</a></h2>

<li class="map_li">의뢰게시판</li></a>

</ul>

</div>

</ul>

</div>

<a href="http://seelgi.dothome.co.kr/bbs/board.php?bo_table=study"><li class="map_li">학습게시판</li></a></ul>

</div>

</body>

</html>

include_once(G5_PATH.'/tail.php');

2. 두번째 질문 이미지

정상적인 롤오버서브메뉴

ie9이하에서 행간이 넓어지는 서브메뉴

line-height가 달라지는것같은데..

어떻게 해야할지 모르겠습니다.

도와주세요.. ;

#그누보드5 #크로스브라우징 #li #line-height

답변 1

ignaz 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2016-01-11 02:28:07 182.♡.♡.133

홈페이지 방문해서 확인해보니 여러 가지 문제가 있네요.

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로 변경하세요.

메뉴가 길어지면 콘텐츠 부분이 아래로 밀려 내려가면 안되잖아요 ㅎㅎ

답변을 작성하시기 전에 로그인 해주세요.

전체 60

크로스브라우징 문제, 2가지 질문드립니다.

QA

크로스브라우징 문제, 2가지 질문드립니다.

관련링크

본문

이 질문에 댓글 쓰기 :

답변 1

ignaz 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변