Vấn đề jQuery .height() với chrome

Question

Tôi đã sử dụng chức năng jQuery Height. Nhưng đã xảy ra sự cố khi nhận được chiều cao chính xác của phần tử div của tôi. Chiều cao của thành phần div này được đặt thành auto, có nghĩa là chiều cao của div chỉ phụ thuộc vào các phần tử bên trong của nó. Khi tôi thử sử dụng trang .height() trong trang của mình, tôi nhận được kết quả sau:

Chrome: 1276 px 
Firefox: 1424 px 

Nhưng khi bạn thấy cả hai đều có chiều cao bằng nhau. Điều duy nhất là hàm height() trả về kết quả khác nhau.

Dưới đây là các mã:

<div class="single-mid" style="position:relative;width:700px;margin:-1px 0 0 1px;padding-right:56px;"> 
    <div>Sample Inside Element</div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    var less_height = $('.single-mid').height() -10; 
    $('.single-mid').height(less_height); 
}); 
</script> 

Nhưng tôi đã cố gắng để thiết lập chiều cao của div vào 1424px. Cả hai trình duyệt đều trả lại kết quả tương tự.

Bất kỳ ý tưởng nào? Cảm ơn trước.

Answer 1

Có vẻ như do phông chữ mặc định khác nhau trong hai trình duyệt gây ra. Nếu bạn thêm CSS sau đây để ví dụ của bạn, kết quả sẽ là như nhau cho cả Firefox và Chrome/Sắt:

<style type="text/css"> 
    div { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 2em; 
    } 
</style> 

Bạn có thể sử dụng một CSS reset và xác định phong cách cho mình. Điều này sẽ giúp bạn kiểm soát nhiều hơn về cách làm cho nó trông giống nhau trong hầu hết các trình duyệt.

Answer 2

Đã xảy ra sự cố tương tự. Nhưng nếu tôi đã làm một sự chậm trễ setTimeout ngắn trước khi thực hiện kiểm tra cao, chrome bắt đầu báo cáo cùng chiều cao như firefox. Có vẻ như Chrome kích hoạt trạng thái sẵn sàng của tài liệu trước khi xác định đầy đủ cách nội dung sẽ thay đổi kích thước thực của vùng chứa ...!? Trong mọi trường hợp, sửa chữa của tôi đã thay đổi tôi:

$(window).load(... 

mà không kích hoạt cho đến khi "tất cả các phần tử con đã hoàn toàn được tải" (từ http://api.jquery.com/load-event/):

$(document).ready(... 

để a.

Answer 3

Điều này đã xảy ra với tôi và lý do một số hình ảnh trong số div mà tôi đã tính toán chiều cao của không có tập hợp thuộc tính height.

$(window).load( đã làm việc cho tôi, nhưng gây ra quá nhiều sự chậm trễ cho những gì tôi muốn làm.

Answer 4

Hãy thử hai phương pháp để chiều cao cố định trong chrome và IE

jQuery(document).ready(function() { 
    // your code here 
}); 

Và

jQuery(window).load(function(){ 
    // your code here 
}); 

Answer 5

tôi đã cùng một vấn đề với trình đơn thả xuống bootstrap rằng yếu tố phải được chiều cao bình thường. Đối với một số menu (không phải tất cả), jquery không trả về chiều cao phù hợp, dẫn đến việc bình thường hóa xấu. Đó là vì các menu thả xuống bị ẩn trong quá trình chuẩn hóa. Có vẻ như CHROME và FIREFOX không tính chính xác chiều cao khi phần tử bị ẩn. IE dường như hoạt động tốt hơn trong trường hợp này.

Để giải quyết vấn đề này, tôi có thêm (sau đó loại bỏ) các lớp bootstrap "mở" cho tất cả các menu, để làm cho họ có thể nhìn thấy trong bình thường:

$(window).on("load resize orientationchange", function() { 
     $(".dropdown").addClass("open"); 
     normalize_all(); 
     $(".dropdown").removeClass("open"); 
    });