테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

울트라마린 9년 전 조회 9,784
답변 1
목록

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

웹개발 초보여서 크로스브라우징은 거의 걸음마 단계입니다.
그누보드5로 작업했고
만든 홈페이지가 크롬이나 사파리, 익스플로러 10이상은 모두다 정상으로 나오는것을 확인한 상태입니다.
그런데.. 익스플로러 9이하부터 틀이 이상하게 틀어지는 현상이 생기는 것을 확인하고, 
고수님들께 도움을 청합니다. ㅜㅜ
1. 사이트맵 페이지에서 이상하게 아래로 밀리는 현상이 일어납니다. 
2. 메뉴 롤오버시 이상하게 line-height가 넓어지는 현상이 일어납니다. 고수님들 도와주세요. ㅜㅜ
1. 첫번째 질문 이미지 및 코드
http://kinimage.naver.net/20160107_165/14521709769303V7ht_PNG/%BD%CC%BD%CC%B5%F0%C0%DA%C0%CE_%C8%A8%C6%E4%C0%CC%C1%F6%C0%D4%B4%CF%B4%D9._%2820160107%29.png?type=w620" width="320" height="519" style="margin: 0px; padding: 0px; border: 0px; cursor: pointer;">  정상적인 화면 http://kinimage.naver.net/20160107_166/145217097725532GrE_PNG/%BD%CC%BD%CC%B5%F0%C0%DA%C0%CE-.png?type=w620" width="320" height="519" style="margin: 0px; padding: 0px; border: 0px; cursor: pointer;"> ie9이하에서 아래로 밀리는 사이트맵 페이지...  
일단은 위메뉴부분은 head.php 
아래 푸터부분은 tail.php로 되어있고,
사이트맵 메인화면은 page4.php로 되어있습니다.
page4.php코드 붙여드립니다.
include_once("./_common.php");
include_once(G5_PATH.'/head4.php');
?>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
사이트맵
   
        
   
    
 
 
 
include_once(G5_PATH.'/tail.php');
?>
2. 두번째 질문 이미지 
http://kinimage.naver.net/20160107_42/1452171039507KWJw7_JPEG/%C1%A4%BB%F3%C0%FB%C8%AD%B8%E9.jpg?type=w620" width="320" height="125" style="margin: 0px; padding: 0px; border: 0px; cursor: pointer;"> 정상적인 롤오버서브메뉴
http://kinimage.naver.net/20160107_227/1452171039363cr2ft_JPEG/%B4%C3%BE%EE%B3%AD%C8%AD%B8%E9.jpg?type=w620" width="320" height="125" style="margin: 0px; padding: 0px; border: 0px; line-height: 1.5; cursor: pointer;">ie9이하에서 행간이 넓어지는 서브메뉴
line-height가 달라지는것같은데.. 
어떻게 해야할지 모르겠습니다. 
도와주세요.. ;
#그누보드5 #크로스브라우징 #li #line-height
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
i
ignaz
9년 전

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

 

1. ie9 이하에서 아래로 밀리는 사이트맵 페이지

head, tail 파일에는 , , , 태그가 있을텐데

page4.php에서 중복되는 태그를 지우셔야 합니다.

 

그리고 스타일시트나 자바스크립트 파일을 불러와야 할 경우

</span></font></p><p><font color="#636363"><span style="font-size: 12px; line-height: 18px;"><?php</span></font></p><div style="color: rgb(64, 64, 64); font-family: gulim, sans-serif; font-size: 13px; letter-spacing: -0.01px; line-height: 22.1px; margin: 0px; padding: 0px;"><span style="color: rgb(99, 99, 99); font-family: 돋움, dotum;">include_once("./_common.php");</span></div><p><span style="font-size: 9pt; line-height: 18px; color: rgb(99, 99, 99);">add_stylesheet('<link href="경로" />');</span></p><p style="font-size: 14.6667px;"><font color="#636363"><span style="font-size: 9pt; line-height: 18px;">add_javascript('<script src="경로"></script>');</span></font></p><p style=""><font color="#636363"><span style="font-size: 12px; line-height: 18px;">?></span></font></p><p><font color="#636363"><span style="font-size: 12px; line-height: 18px;">

 

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

행간에 문제가 아니라 태그 작성이 잘못되어 이상하게 인식을 하네요.

    태그 자식은 무조건
  • 태그가 먼저 와야 합니다.

    </span></p><p style="font-size: 14.6667px;"><span style="color: rgb(99, 99, 99); font-size: 9pt;"><ul></span></p><p style="font-size: 14.6667px; margin-left: 40px;"><span style="color: rgb(99, 99, 99); font-size: 9pt; line-height: 1.5;"><li><a href="#">메뉴1</a></li></span></p><p style="font-size: 14.6667px; margin-left: 40px;"><span style="color: rgb(99, 99, 99); font-size: 9pt; line-height: 1.5;"><li><a href="#">메뉴2</a></li></span></p><p style="font-size: 14.6667px;"><span style="color: rgb(99, 99, 99); font-size: 9pt;"></ul></span></p><p style="font-size: 14.6667px;"><span style="color: rgb(99, 99, 99); font-size: 9pt;">

     

     

    상위 브라우저에서 잘보인다고 정상적인 화면이 아닙니다.

    잘못된 부분이 있더라도 알아서 해석하여 보여주기 때문이죠.

    오히려 하위 브라우저가 더 정확하다고 생각하시면 되요.

    (물론 ie 버전별 스타일 문제가 많지만요 ^^;)

    W3C 권고사항에 의하면 태그는 의미에 맞게 작성해야 하므로..

    주 메뉴부분은

    태그보다는 목록 태그(ul, ol, dl)을 사용해야 하고,

    서브메뉴의 스타일은 position: relative 보다는 absolute로 변경하세요.

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

    로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인