이전
목록
다음
쥬

고수님들 CSS 의 호환성에 관해서 급 도움부탁드립니다.

쥬노
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 · 2014-07-16 (수) 22:52:50 · 4004 · 3

그누보드에다가 예전에 테이블로 만들고 메뉴는 플래쉬로 만들었다가 메뉴부분만 CSS로 다시 만들었는데,

익스플로러11에서는 잘구동이 되는데 하위버전에서 CSS로 만들어진 메뉴부분만 틀이 깨지는데

제가 어떻게 손을 못대겠어요....

 

아래 코드인데 어떤부분을 고쳐야 되는지요....

고수님들의 도움의 손길을 기다립니다...

 

<?
</style>
include_once("./_common.php");
include_once("$g4[path]/head.sub.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/visit.lib.php");
include_once("$g4[path]/lib/outlogin.lib.php");
//echo outlogin("2ustory_white"); // basic 스킨으로 아웃로그인을 출력합니다.
$g4['title'] = " ";
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />

<title>수원 금호프라자에 오신것을 환영합니다.</title>

<style type="text/css">
.navi,
.navi ul,
.navi li,
.navi a {
 margin: 0;
 padding: 0;
 border: none;
}

.navi { 
 list-style-type: none;
 height: 40px;
}
.navi li {
 float: left;
 position: relative;
 background: #0066cc;
 z-index: 1; 

}

.navi li:first-child{
 -webkit-border-radius: 5px 0 0 0;
 -moz-border-radius: 5px 0 0 0;
 border-radius: 5px 0 0 0;
}

.navi li:last-child{
 -webkit-border-radius: 0 5px 0 0;
 -moz-border-radius:  0 5px 0 0;
 border-radius:  0 5px 0 0;
}

.navi li a {
 display: block;
 font-family:"굴림",gulim,sans-rerif;
 font-weight:bold;
 width:110px;
 padding:0 20px;
 margin:10px 0;
 text-align:center;
 color: #ffffff;
 text-decoration: none;
 
 border-left:1px solid #006633;
 border-right:1px solid #003333;

 -webkit-transition: color .2s ease-in-out;
 -moz-transition: color .2s ease-in-out;
 -o-transition: color .2s ease-in-out;
 -ms-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;
}

.navi li:first-child a{
border-left:0;
}

.navi li:last-child a{
border-right:0;
}

.navi li a:hover {
 color:#F90;
}
.navi li ul { 
 opacity: 0;
 position: absolute;
 left: 0;
 background: #3366cc;
 list-style-type: none;
 padding: 0;
 margin: 0;
  

 -webkit-transition: opacity .25s ease .1s;
 -moz-transition: opacity .25s ease .1s;
 -o-transition: opacity .25s ease .1s;
 -ms-transition: opacity .25s ease .1s;
 transition: opacity .25s ease .1s;
}

.navi li:hover ul{
 position:absolute;
 right:0;
}
.navi li:hover ul {
 opacity: 1;
 -webkit-border-radius: 0 0 5px 5px;
 -moz-border-radius: 0 0 5px 5px;
 border-radius: 0 0 5px 5px;
}
.navi li ul li {
 float: none;
 position: static;
 height: 0;
 line-height: 0;
 background: none;
  

  -webkit-transition: height .25s ease .1s;
 -moz-transition: height .25s ease .1s;
 -o-transition: height .25s ease .1s;
 -ms-transition: height .25s ease .1s;
 transition: height .25s ease .1s;
}
.navi li:hover  ul li {
 border-bottom:1px dotted #006633;
 height:42px;
}

.navi li:hover ul li:last-child{
 border-bottom:0;
 margin-bottom:10px;
}

.navi li ul li a {
 margin:0;
 text-align:center;
 background: #0066cc;
 padding:10px 20px;
 line-height:22px;
 border:0;
 color:#FFF;
 
}
.navi li ul li a:hover {
 background: #0099ff;
}
</style>​ 

 

#퍼블리셔톡 #퍼블리셔
|

댓글 3개

LaRuota
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-07-17 (목) 10:47:33
border-radius, transition 는 css3요소입니다...
border-radius는 크게 문제될거 같지않지만,
사용하고 계시는 메뉴효과의 주요부분이 모두 transition으로 처리되어 있기때문에 발생하는 문제 같습니다..
css3가 지원되지않는 구버전 브라우저에서는 정상출력되지 않습니다..
javascript혹은 j쿼리를 사용하여 메뉴기능을 대체해시거나
구버전에서 사용가능한 css만으로 수정하셔야할것 같습니다.

-------------------------------------------------------------------------------------------------

라고 적어놓고보니 질답게시판에도 글을 올려두셨네요.
이미 답변을 주신분이 계시네요. 해당 답변이 더 상세합니다.
제 답변은 그냥 참고하시면 될 듯합니다.
쥬노
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-07-22 (화) 15:35:04
감사합니다..근데 질문데 대한 답으로 채택은 어떻게 하는지...아무리 찾아도 없네요
쥬노
프로필 보기게시판 작성글 보기전체 작성글 보기전체 댓글 보기
 2014-07-17 (목) 17:40:58
아...감사합니다...^^
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
12-08-29 조회 4,174
12-08-07 조회 3,835
12-08-03 조회 3,646
12-07-31 조회 3,753
12-07-30 조회 3,706
12-07-16 조회 3,902
12-07-15 조회 3,736
12-07-07 조회 3,600
12-07-06 조회 3,805
12-07-03 조회 3,760
12-06-29 조회 3,373
12-06-22 조회 3,743
12-06-17 조회 4,004
12-05-21 조회 3,929
12-05-02 조회 3,450
12-05-02 조회 4,246
12-05-02 조회 3,368
12-04-30 조회 3,565
12-04-30 조회 3,245
12-03-17 조회 4,113
12-03-10 조회 3,442
12-03-08 조회 3,967
12-03-03 조회 3,681
12-02-27 조회 5,098
12-02-17 조회 4,387
12-02-16 조회 4,672
12-02-03 조회 3,336
12-01-31 조회 3,247
12-01-24 조회 3,243
12-01-17 조회 3,950
12-01-05 조회 3,494
11-12-30 조회 3,225
11-12-23 조회 4,780
11-12-08 조회 3,549
11-12-07 조회 4,507
11-11-27 조회 3,935
11-11-25 조회 4,262
11-11-23 조회 3,704
11-11-22 조회 3,564
11-11-09 조회 3,274
11-10-23 조회 3,217
11-10-19 조회 3,169
11-10-08 조회 2,849
11-10-04 조회 2,852
11-10-04 조회 5,310
11-09-01 조회 4,388
11-08-13 조회 2,563
11-08-06 조회 3,247
11-07-11 조회 3,639
11-06-27 조회 2,998
11-06-21 조회 2,662
11-06-13 조회 2,475
11-06-07 조회 2,481
11-05-26 조회 2,437
11-04-20 조회 2,767
11-03-21 조회 2,865
11-03-18 조회 2,559
11-03-11 조회 2,579
11-02-07 조회 2,407
11-01-18 조회 2,728
11-01-12 조회 2,451
11-01-06 조회 2,542
10-12-10 조회 2,803
10-12-09 조회 2,653
10-12-08 조회 5,084
10-11-29 조회 2,919
10-11-28 조회 2,828
10-11-28 조회 2,657
10-11-19 조회 2,849
10-11-04 조회 2,724
10-10-21 조회 2,448
10-10-19 조회 3,410
10-10-12 조회 2,731
10-10-07 조회 2,569
10-09-30 조회 3,523
10-09-17 조회 3,935
10-09-17 조회 3,878
10-05-31 조회 3,585
09-12-31 조회 3,723
09-07-23 조회 5,049
08-09-16 조회 3,251
08-09-06 조회 2,993
08-09-04 조회 3,416
08-08-16 조회 4,442
08-08-15 조회 3,314
08-08-14 조회 4,531
08-08-12 조회 3,997
08-07-23 조회 2,815
08-07-10 조회 3,763
08-07-04 조회 2,992
08-06-27 조회 7,632
08-06-19 조회 4,940
08-05-27 조회 5,543
08-05-25 조회 5,379
08-05-23 조회 3,457
08-05-23 조회 4,621
08-05-21 조회 4,974
08-05-20 조회 4,085
08-05-20 조회 3,313
08-04-18 조회 4,383
글쓰기