2012-02-13 4 views
13

위대한 HTML5 상용구를 사용하고 있습니다. 그것은 큰 프로젝트의하지만 IE 8과 7 렌더링 몇 가지 큰 문제가 있어요 (아마도 8을 아직 시도하지 않은)IE 및 HTML5 doctype 문제

파일은 HTML5의 문서 타입이 있습니다

<!doctype html> 
<head> 

을하지만 문제는 그 더 완전하고 추한 DOCTYPE 같은 ...

<!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"> 

이없는 나는 문제를 렌더링의 모든 종류의 수 : 차이로 중심 : 자동 작동하지 않는 높이, 폭, martings와 패딩이 모든 미친처럼 행동 내 모든를 레이아웃은 단지 <!doctype>으로 끝납니다.하지만 이전 버전으로 전환하면 모든 것이 g는 (물론, 잘되지, 그것은 여전히 ​​IE, 그러나 예상대로)

HTML5 상용구 내가이 문제를 해결해야한다고 생각 모더 나이저와 함께 제공하지만 작동하지 않습니다 잘 작동합니다. 내 "연구"(구글)에서 나는

은 IE가 <!doctype>와 쿼크 모드로 전환되지 않도록 할 수있는 방법이 있나요 ... 문제는 그래서 IE는 쿼크 모드 폭 <!doctype>에 들어가는 것을 발견?

또는 적어도 여백, 폭, 패딩을 파괴하지 않기, 등?

편집 :이 전체 머리 :

<!doctype html> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
+0

이 질문의 해결책은 무엇입니까? – pal4life

답변

14

IE가 DOCTYPE와 쿼크 모드로 전환하지 않습니다. 상용구는 IE 문제를 일으키는 것이 아니라이를 수정해야합니다. doctype 뒤에 <html> 요소가 누락되었습니다. 그것을 추가하여 상황이 바뀌는 지 확인하십시오. HTML5는 그것을 필요로하지 않지만 누락 된 경우 IE 나 상용구가 문서에 따라 미칠 수 있습니다.

또한, 단지 DOCTYPE 후 주석을 제거하고이 문제가 해결 갈 수 있도록해야한다.

+1

나는 누락 된 것이 아니지만, 상용구는 다음과 같습니다. – Juan

+0

@Juan - 그런 다음 우리는 우리가 추측하고있는 완전한 마크 업 원인을 볼 필요가 있습니다. – Rob

+7

이 답변의 실제 해결책은 무엇입니까? – Catfish

7

<head></head> 태그에이를 넣어보십시오 : 이미있을 경우,

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

를 제거하고 나타날 수있는 당신의 원하는 결과.

+0

그것은 거기에, 내가 그것을 제거했지만 아무것도 바뀌지 않았다 – Juan

0

나는 "대단한"너무 많이 아니에요,하지만이 조건 HTML을해야 할 일을하고 IE8과 아래이 같은 HTML 4.01 문서 타입을 선언 할 것이다 : 그 그렇지 않으면

<!-- HTML 5 doctype --> 
<!doctype html> 

<!-- HTML 4.01 Doctype --> 
<!--[if lte IE 8]> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<![endif]--> 

당신이 시도 할 수 있었다 (인해 두적인 doctypes를 읽고 브라우저에) 이전 버전의 브라우저에서 작동 :

<!DOCTYPE HTML <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd" 
<![endif]-->> 
+3

귀하의 의견은 모드를 quirks로 넣어 IE가. doctype 앞에 아무것도 넣을 수 없습니다. – Rob

6

IE가 HTML의 문서 타입과 단점에 가지 않습니다 - 그 요점입니다!

은 무엇이 새로운 DOCTYPE에 대한 좋은 데요, 특히, 현재의 모든 브라우저 (IE, FF, 오페라, 사파리) 그것을보고 표준 모드로 내용을 전환하는 것입니다 - 그들은 구현하지 않더라도 HTML5. 즉, 오늘 HTML5 을 사용하여 웹 페이지를 작성하고 매우 오래, 아주 오랫동안 사용할 수 있습니다.

(http://ejohn.org/blog/html5-doctype/)

그러나, 문서 타입 전에 아무것도 가진 (개행 문자, 주석 등)됩니다.

내가하고있는 일을 확인하고 싶습니다. HTML5 doctype은 브라우저를 버릇이 없게 만듭니다.

0

조건부 주석과 호환 모드로 들어가기 쉽습니다. .htaccess 파일 또는 다른 서버 구성 파일 내에 x-ua-compatible 헤더 서버 측을 설정하는 것이 좋습니다.

-4

doctype html 대신 doctype html을 사용하십시오. doctype 태그는 대소 문자를 구별합니다. 이것이 원인 일 수 있습니다.

+7

대/소문자를 구분하지 않습니다. –

0

내가 게시 한 마크 업 풀캡에 아무런 문제가 없습니다. 이것은 보일러 플레이트에 널리 사용되는 표준 마크 업으로서 브라우저 기능을 감지하는 데 사용되는 멋진 JavaScript 라이브러리 인 Modernizr을 포함합니다.

<!doctype html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
<head> 

현재 응용 프로그램에서 사용하고 있으며 어떤 브라우저에서도 문제가 없습니다. 내가 그렇게 같이 사용할 수 있지만 다음 IE 조건부 주석을 테스트를 위해서

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 
<head> 

, I는 대문자와 소문자 DOCTYPE 함께, IE9, IE8IE7 테스트 단지를 두 번 확인합니다. 내가 <!doctype html> 대신 <!DOCTYPE html>을 사용하는 경우

내가 IE7에서 관찰 한 유일한 이상한 것은

는, 웹 글꼴 (내 응용 프로그램의 모든 네) 때로는 렌더링하는 데 실패 할 것이라고했다.

는 참고 : 난 그냥 확인하고 조건부 주석이 프로젝트에 도입 할 때 HTML5 Boilerplate Project가 9 월 24 일 2013 년에 나는 확신 할 수 removed support for IE conditional comments을 가지고 있음을 볼 수 있지만 월 24 일에 그 it used to be around the body tag when the project was ported to Github을 볼 수 있습니다 한 2010 년

0

BOM없이 파일을 UTF-8로 저장하십시오. 그것은 나를 도왔다.