2012-02-13 36 views
13

Tôi đang sử dụng bản mẫu HTML5 tuyệt vời. Đó là một dự án lớn nhưng tôi có một số vấn đề lớn render trong IE 8 và 7 (có thể là 8 nhưng đã không cố gắng chưa)Các vấn đề về tài liệu về IE và HTML5

Các tập tin có DOCTYPE HTML5:

<!doctype html> 
<head> 

Nhưng vấn đề là mà không có đầy đủ và xấu xí DOCTYPE như ...

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

tôi nhận được tất cả các loại render các vấn đề: tập trung bởi margin: auto không hoạt động, chiều cao, chiều rộng, martings và miếng đệm không tất cả cư xử như điên và tất cả của tôi bố cục bị hỏng chỉ với <!doctype> nhưng nếu tôi chuyển sang bố cục cũ, mọi thứ g hoạt động tuyệt vời (tốt, không tuyệt vời, nó vẫn là IE, nhưng như mong đợi)

HTML5 Boilerplate đi kèm với Trình tối ưu hóa mà tôi nghĩ nên khắc phục điều này nhưng nó không hoạt động. Từ "nghiên cứu" của tôi (Google) tôi thấy rằng IE đi vào chế độ quirks rộng <!doctype>, do đó, câu hỏi là ...

Có cách nào để ngăn chặn IE chuyển sang chế độ quirks với <!doctype>?

Hoặc ít nhất là không để phá lề, chiều rộng, đệm, v.v ...?

Edit: Đây là toàn bộ đầu:

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

Giải pháp cho câu hỏi này là gì? – pal4life

Trả lời

14

IE không đi vào chế độ quirks với loại tài liệu đó. Các boilerplate nên được sửa chữa các vấn đề IE, không gây ra chúng. Bạn thiếu phần tử <html> sau loại tài liệu. Thêm điều đó để xem mọi thứ có thay đổi không. HTML5 không yêu cầu nó, nhưng, nếu thiếu, hoặc IE hoặc boilerplate có thể phát điên theo các tài liệu.

Ngoài ra, chỉ cần xóa nhận xét sau loại tài liệu và điều đó sẽ khiến cho sự cố không còn nữa.

+1

Tôi không bỏ lỡ nó, bản mẫu có nó: – Juan

+0

@Juan - Sau đó, chúng ta cần xem nguyên nhân đánh dấu hoàn chỉnh mà chúng ta đang đoán. – Rob

+7

Giải pháp thực tế từ câu trả lời này là gì? – Catfish

7

Hãy thử đặt này trong thẻ <head></head>:

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

Nếu nó đã ở đó, sau đó loại bỏ nó, và bạn có thể nhận của bạn kết quả mong muốn.

+0

nó ở đó, tôi gỡ bỏ nó nhưng không có gì thay đổi – Juan

0

Tôi không quá nhiều của một "Wiz", nhưng nó sẽ không làm việc để làm html có điều kiện và tuyên bố một HTML 4,01 DOCTYPE cho IE8 và dưới như thế này:

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

Nếu đó không làm việc trong các trình duyệt cũ hơn (do trình duyệt đọc hai loại tài liệu) bạn có thể thử điều này:

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

Ý kiến ​​của bạn KHÔNG đặt IE vào chế độ quirks. Bạn không thể đặt bất cứ thứ gì ở phía trước của loại tài liệu. – Rob

6

IE không đi vào quirks với loại tài liệu HTML - đó là toàn bộ vấn đề!

gì tốt đẹp về DOCTYPE mới này, đặc biệt, đó là hiện nay tất cả trình duyệt (IE, FF, Opera, Safari) sẽ nhìn vào nó và chuyển đổi các nội dung vào chế độ tiêu chuẩn - mặc dù họ không thực hiện HTML5. Điều này có nghĩa là bạn có thể bắt đầu viết các trang web của mình bằng cách sử dụng HTML5 hôm nay và để chúng kéo dài trong một thời gian rất, rất dài.

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

Tuy nhiên, có bất cứ điều gì trước khi DOCTYPE (dòng mới, ý kiến ​​vv) sẽ.

Tôi muốn kiểm tra xem bạn đang làm gì - loại tài liệu HTML5 sẽ không đặt trình duyệt của bạn thành các kỳ quặc.

0

Có khả năng là nó đang chuyển sang chế độ tương thích với các nhận xét có điều kiện. Chúng tôi khuyên bạn nên đặt máy chủ tiêu đề x-ua-compatible trong tệp .htaccess hoặc các tệp cấu hình máy chủ khác.

-4

thử DOCTYPE html thay vì doctype html thẻ doctype phân biệt chữ hoa chữ thường, đây sẽ là lý do.

+7

Nó không phân biệt chữ hoa chữ thường. –

0

Tôi thấy không có gì sai với đánh dấu toàn bộ số đầu số bạn đã đăng. Đây là một đánh dấu tiêu chuẩn được sử dụng rộng rãi trong các bản mẫu bao gồm Modernizr, một thư viện JavaScript tiện lợi được sử dụng để phát hiện các tính năng của trình duyệt.

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

Tôi sử dụng nó trong ứng dụng hiện tại của mình và không gặp bất kỳ sự cố nào trên bất kỳ trình duyệt nào. Mặc dù tôi sử dụng nó như vậy:

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

Vì lợi ích của thử nghiệm các ý kiến ​​có điều kiện IE, tôi thử nghiệm trên IE9, IE8IE7, với cả chữ hoa và chữ thường DOCTYPE, chỉ cần cho kiểm tra hai lần.

Điều kỳ lạ duy nhất mà tôi đã quan sát thấy trên IE7 là phông chữ web (tất cả bốn trong ứng dụng của tôi) sẽ không hiển thị đôi khi, khi tôi sử dụng <!doctype html> thay vì <!DOCTYPE html>.

FYI: Tôi vừa mới kiểm tra và thấy rằng HTML5 Boilerplate Projectremoved support for IE conditional comments vào ngày 24 tháng 9 năm 2013. Tôi không thể khẳng định khi bình luận có điều kiện đã được giới thiệu với dự án nhưng có thể thấy rằng it used to be around the body tag when the project was ported to Github vào ngày 24 tháng 1 năm 2010.

0

Thử lưu tệp dưới dạng UTF-8 không có BOM. Nó đã giúp đỡ tôi.