IE8에서 스크립트 먹통문제
본문
업체요청이 있어서 IE8에서도 작동되게끔 수정하고 있는데 상단GNB영역 하위메뉴를 노출시키는 스크립트가 먹히지 않는 것 같습니다.
제가 디자이너라 퍼블리싱을 하고 있기는 하지만 스크립트 문제가 생기면 항상 당황스럽네요 ㅠㅠ
도움부탁드립니다!!
아래는 HEAD부분의 인클루드 소스입니다.
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->
<title>조야코리아</title>
<script type="text/javascript" src="../js/slide2/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/slide2/jquery.als-1.7.min.js"></script>
<!-- 레이아웃 -->
<link rel="stylesheet" type="text/css" media="screen" href="../css/slide2/CSSreset.min.css" />
<link rel="stylesheet" href="../css/layout.css" type="text/css">
<link rel="stylesheet" href="../css/navi.css" type="text/css">
<link rel="stylesheet" href="../css/forms.css" type="text/css">
<link rel="stylesheet" href="../css/wp.css" type="text/css">
<!-- 메인슬라이드 -->
<script src="../jquery-2/jquery.bxslider.min.js"></script>
<!-- 메인슬라이드 css -->
<link href="../jquery-2/jquery.bxslider.css" rel="stylesheet" />
<!-- 메인슬라이드 -->
<script>
$(function () {
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
});
});
</script>
<!-- 메인슬라이드 -->
</head>
<body>
<div class="wrapper row1">
<header id="header" class="clear">
<div id="hgroup"> <a href="../main/main.php"><img src="../images/logo.png" width="109" height="48"></a> </div>
<nav>
<ul class="clear">
<li class="first"><a href="http://xweb26.cafe24.com/joya/joya_fuction.php">Joya</a>
<ul>
<li><a href="http://xweb26.cafe24.com/joya/joya_fuction.php">조야의 효과</a></li>
답변 1
메뉴는 스크립트로 제어되는것이 아니라 css에서 제어되고 있는것처럼 보이네요.
#header nav ul ul 값의 left 속성을 삭제 하고
display:none;
#header nav ul li:hover ul 의 left속성을 삭제하고 display:block;
을 사용해보시는것이 어떠신지요~
답변을 작성하시기 전에 로그인 해주세요.