programing

IE 8 자동으로 닫힘IE 8 자동으로 닫힘태그

javajsp 2023. 3. 20. 21:27

IE 8 자동으로 닫힘
태그

배경

현재 응답형 웹사이트의 최종 QA 작업을 진행 중이며 IE 8과 IE 7에 문제가 있습니다.제 고객은 정부와의 계약을 취급하기 때문에 그들의 웹사이트는 IE8 및 IE7과 호환되어야 합니다.저는 html5shiv가 내장된 Modernizr을 사용하고 있습니다.이 프로젝트를 위해 커스텀 제작된 WordPress 테마의 바닥글에 Modernizr을 로드합니다.나는 doctype이나 다른 명백한 코드를 놓치고 있지 않다.

WordPress의 바닥글에 로드된 다음 스크립트를 사용하고 있습니다.

상황

IE 8이 자동으로 닫히는 데 문제가 있습니다.<header>태그. 먼저 이 문제를 확인하기 위해 두 가지 유틸리티를 사용했습니다.

  1. IETESTER
  2. IE 11을 IE 8에 에뮬레이트(IE 8 사용자 에이전트 포함)

다음은 올바른 출력입니다.

<div class="wrapper main-header">
    <header class="container">
        <div class="sixteen columns alpha omega">
            <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
            <div class="wrapper main-navigation desktop">
                <nav id="nav" class="six columns alpha omega">
                    ...
                </nav>
                <div class="eight columns alpha omega overlay" style="display: none;">
                    ...
                </div>
                <div class="two columns alpha omega menu-ss">
                    ...
                </div>
            </div><!-- .wrapper.main-navigation --> 
        </div><!-- /.sixteen.columns --> 
    </header><!--/header-->
</div><!-- /.main-header -->

IE 8의 렌더링 내용:

<div class="wrapper main-header">
    <header class="container"></header>
        <div class="sixteen columns alpha omega">
            <div class="eight columns alpha omega logo"> <a href="http://example.com"><img src="http://example.com/wp-content/uploads/2013/10/logo.png" alt="Example"></a> </div>
            <div class="wrapper main-navigation desktop">
                <nav id="nav" class="six columns alpha omega">
                    ...
                </nav>
                <div class="eight columns alpha omega overlay" style="display: none;">
                    ...
                </div>
                <div class="two columns alpha omega menu-ss">
                    ...
                </div>
            </div><!-- .wrapper.main-navigation --> 
        </div><!-- /.sixteen.columns --> 
    </header><//header><!--/header-->
</div><!-- /.main-header -->

내가 시도한 것

  • html5shiv와 IE를 조건부로 로드하는 중<head>
  • 로의 Modernizr 로드<head>

Stackoverflow에 관한 다음 질문/응답에 대해 살펴보았습니다.

이 문제에 대한 어떤 도움도 대단히 감사합니다!주말에 정말 이 웹사이트를 완성하고 싶어요.나는 이 문제로 지난 몇 시간 동안 벽에 머리를 부딪쳤다.

갱신하다

다음은 에뮬레이션을 차단하기 위한 브라우저 해킹의 이미지입니다.Windows 7 및 Windows XP (IE 8 및 IE 7)에서 가상으로 사이트를 테스트했습니다.http://www.browserstack.com/screenshots/0d7c1d6dd22927c20495e67f07afe8934957b4d1

Modernizr, jQuery 및 response.js를 로 이동하여 문제를 해결했습니다.<head>DOM 의 경우.도와주셔서 감사합니다!

한 가지 깨달은 것은<nav>IE8에서는 지원되지 않습니다.따라서 헤더 내의 심 등을 이동해야 합니다.

왜 그런지 좋은 정보일 것 같아서요

W3C 

The <nav> tag is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

Note: Internet Explorer 8 and earlier versions, do not support the <nav> tag.

또 다른 관심 기사인 Paul Irish의 (HTML5 Shiv의 이야기)는 "새로운 요소는 어린이를 유지할 수 없으며 CSS의 영향을 받지 않는다"고 기술하고 있으며, 이것이 태그가 스스로 닫히는 이유일 수 있다.이게 범인인지 자세히 설명해 줄 수 있는 사람이 있는지 관심을 가져보세요.

언급URL : https://stackoverflow.com/questions/19870553/ie-8-automatically-closing-header-tag

'programing' 카테고리의 다른 글

WP: wp_enqueue_script에서 버전 번호를 삭제하려면 어떻게 해야 합니까?  (0) 2023.03.20
스프링 데이터 내의 FindAll과 함께 OrderBy를 사용하는 방법  (0) 2023.03.20
Woocommerce 제품 가져오기  (0) 2023.03.20
텍스트 영역의 트위터 스타일 자동 완성  (0) 2023.03.20
워드프레스에서 다음/이전 포스트 href 및 제목을 가져오는 방법  (0) 2023.03.20

'programing'의 다른글

  • 현재글IE 8 자동으로 닫힘IE 8 자동으로 닫힘태그

관련글

댓글

티스토리툴바