jQuery outerHeight trả về giá trị không chính xác IE

Question

Tôi đang cố gắng lấy chiều cao của một phần tử trên một trang. Tôi nhận được giá trị dự kiến ​​(700px hoặc hơn) trong FF và Webkit trên Mac, nhưng tôi nhận được một giá trị 0 trong IE8. Tôi chưa thử phiên bản IE trước đó.

html:

<section> 
    <article> 
    ... 
    </article> 

javascript:

var height = myElement.outerHeight(true); 

Có một số điều mà có thể được làm phức tạp này.

1. Tôi đang cố gắng để đo lường các yếu tố ngay sau nó là động thêm vào trang (nguyên tố này là thêm vào như là kết quả của một ajax theo yêu cầu),
2. yếu tố Tôi cố gắng để biện pháp là phần tử html5 (phần).

Một điều tôi đã nhận thấy là các phần tử html5 được chèn vào được định dạng kém khi xem bằng công cụ nhà phát triển. Tôi nhận được những thứ như </article/>. Bất cứ thứ gì là một phần của trang khi nó được tải đều ổn.

Một số điều tôi đã cố gắng trong nỗ lực giải quyết vấn đề:

1. Tôi đã thêm css để áp dụng display: block cho tất cả các yếu tố html5
2. Tôi đã thêm Remy Sharp "html5 tạo điều kiện cho kịch bản" (http://remysharp.com/2009/01/07/html5-enabling-script/)
3. tôi đang sử dụng
4. tôi đã cố gắng sử dụng tất cả các div thay vì yếu tố html5
5. myElement.height() trả về giá trị của 'tự động' trong IE8 trong khi ở các trình duyệt khác tôi nhận được giá trị pixel. innerHeight() trả về null.

Cảm ơn

Answer 1

Một điều tôi đã nhận thấy là các phần tử html5 được chèn được định dạng kém khi được xem bằng công cụ nhà phát triển. Tôi nhận được những thứ như </article/>

Định dạng không kém, đó là công cụ dành cho nhà phát triển cho bạn biết chính xác giao diện của IE DOM.IE không phân tích cú pháp các phần tử HTML5 đúng cách mà kết quả trong các phần tử không phải là nơi bạn mong đợi chúng, và do đó chiều cao và kết xuất không phù hợp với những gì bạn mong đợi. Điều gì xảy ra là IE xử lý các phần tử không xác định như luôn là các phần tử với mô hình nội dung EMPTY: các thành phần như <img/> hoặc <br/> không bao giờ có thẻ đóng (yêu cầu cú pháp tự đóng trong XHTML). Vì vậy, khi IE thấy <section>, nó tạo và đóng một phần tử section. Sau đó, phần tử tiếp theo, <article>, đi kèm sau các <section/> và không bên trong. Khi IE thấy </section>, nó cho rằng đó không phải là thẻ đóng mà thẻ trống có tên là /section (tất nhiên là không hợp lệ, nhưng khi IE có quan tâm đến điều đó?).

Vì vậy, chiều cao của phần tử <section/>, không chứa gì, có thể sẽ bằng 0 và nếu bạn đặt nền trên nền đó sẽ không bao gồm <article/>.

Như Nick đã đề cập, html5shiv có thể sửa chữa một số của những vấn đề này bằng cách sử dụng createElement tạm lừa IE vào suy nghĩ nó biết rằng <section> là một yếu tố thực sự. Điều này không thực sự bao gồm toàn bộ vấn đề, mặc dù, như khi bạn bắt đầu mucking xung quanh với các hoạt động phân tích cú pháp hơn nữa như thiết lập innerHTML, nó sẽ đi sai một lần nữa. Giai đoạn tiếp theo là cố gắng giải quyết vấn đề này với innershiv; có một số nhược điểm về hiệu suất này vì vậy hãy chắc chắn rằng bạn chỉ sử dụng nó trên IE, và chỉ khi bạn cần (nó không phải là mạnh mẽ như giao diện html() của jQuery).

Cá nhân tôi không thấy nhiều lợi ích cho mọi rắc rối này. Hiện tại, <section/> không thực sự mang lại cho bạn bất kỳ điều gì mà <div class="section"> không thực hiện được. Trong tương lai, có thể có những công cụ có thể làm điều gì đó với ngữ nghĩa, và làm cho các trang web trông hoàn toàn đúng trong IE6-8 sẽ không thành vấn đề. Nhưng ngày hôm đó là một chặng đường dài ngoài IMO.

Answer 2

IE8 chỉ đơn giản là không hỗ trợ những yếu tố ... mặc dù nó cố gắng làm cho chúng một cách chính xác, một số chức năng sẽ không trở lại một cách chính xác bao gồm cả kích thước.

Đây chỉ là sự khác biệt giữa các trình duyệt hỗ trợ các yếu tố và trình duyệt đã cập nhật chúng, bạn có thể thử vận ​​may với một số thư viện hỗ trợ HTML5 chẳng hạn như HTML5 Shiv.