it-swarm-vi.com

Các khối chiều cao tương đương đáp ứng liên tiếp - có vấn đề trong IE8

Yêu cầu: Khối chiều cao bằng nhau trong hàng

Tôi làm việc trên rất nhiều trang web Joomla có thiết kế yêu cầu các div trang khác nhau có chiều cao bằng nhau. Thủ thuật CSS có một ví dụ hay về cách xếp hàng và cân bằng độ cao của nhiều hàng khối. Tuy nhiên, ví dụ về Thủ thuật CSS giả định rằng tất cả các div/khối của bạn sẽ là các thành phần tương tự với một lớp được chia sẻ, ví dụ. .blocks.

Tôi cần một hàm có thể lấy một số phần tử khác nhau trên một trang, không có các lớp chung và cân bằng độ cao tương ứng của chúng. Vì vậy, đây là những gì tôi đã viết:

//EQUAL HEIGHT
equalHeight = function(container1, container2, container3) {

    var mainBlock = container1;
    var secondBlock = container2;
    var thirdBlock = container3;

    // in case the div heights have already dynamically changed,
    // reset the div heights back to their true markup values
    $(mainBlock).css('height','auto');
    $(secondBlock).css('height','auto');
    $(thirdBlock).css('height','auto');

    var highestBlock = 0;

    // determine which is the tallest block before doing anything
    $(mainBlock).each(function(){  
        if($(this).height() > highestBlock){  
            highestBlock = $(this).height();  
        }
    });    

    // Now apply the tallest block value to the heights of all relevant divs
    $(mainBlock).height(highestBlock);
    $(secondBlock).height(highestBlock);
    $(thirdBlock).height(highestBlock);
}

//EQUAL HEIGHT USAGE EXAMPLE
equalHeight('nav#myNav', 'img#someImage', 'section.mySectionClass');


[.__.] Vấn đề

Hàm này hoạt động chính xác theo cách tôi muốn, nhưng tôi gặp vấn đề khi gọi nó trên (window).resize, đặc biệt là trong IE8 . Các trang web của tôi phản hồi nhanh và tôi cần điều chỉnh lại độ cao đã cân bằng của div sau khi kích thước cửa sổ trình duyệt thay đổi kích thước. Điều này có vẻ hoạt động tốt trong các trình duyệt khác, nhưng vì cách IE8 xử lý sự kiện thay đổi kích thước , gọi hàm EquHeight của tôi bên trong sự kiện thay đổi kích thước sẽ kích hoạt vòng lặp vô tận, làm hỏng trình duyệt.

Câu hỏi

Với những điều trên, làm thế nào bạn có thể đảm bảo rằng các trang web có thể có các khối/div có kích thước bằng nhau trong IE8 mà không ảnh hưởng đến hiệu suất? Tôi muốn có thể tránh sử dụng (window).resize sự kiện, nhưng không tìm thấy một sự thay thế vượt trội. Có thời gian và địa điểm tốt hơn để gọi hàm EquHeight không? Có lỗ hổng nào trong chức năng bình đẳng mà tôi đang thiếu không? Giải pháp duy nhất tôi không sẵn sàng xem xét là 'thay đổi thiết kế trang web', vì đây không phải là điều mà tôi có quyền kiểm soát.

1
Candlejack

Trước hết, tôi giả sử bạn đang sử dụng respons.js? Nó là một công cụ tuyệt vời để làm cho IE8 đáp ứng.

https://github.com/scottjehl/R tương ứng

Bây giờ cho sự ngon ngọt. Tất cả bạn cần làm là "điều tiết" sự kiện.

var throttleTimeout = false,
    throttleTime = 2000; //2 seconds
function throttleHeight(event){
   if(!throttleTimeout){ //check if throttle variable is false
      throttleTimeout = setTimeout(function(){ //set a timeout
         equalHeight('nav#myNav', 'img#someImage', 'section.mySectionClass');
         throttleTimeout = false; //reset variable
      },throttleTime);
      throttleTimeout = true;
   }
}
jQuery(window).resize(throttleHeight);

Điều này không cho phép EquHeight chạy nhiều hơn sau mỗi 2 giây, bởi vì trừ khi hết thời gian chờ, nó sẽ không chạy. Chưa được kiểm tra tuy nhiên nó sẽ hoạt động đủ để bạn bắt đầu lên ý tưởng.

1
Jordan Ramstad

Giải pháp duy nhất tôi không sẵn sàng xem xét là 'thay đổi thiết kế trang web', vì đây không phải là điều mà tôi có quyền kiểm soát.

Đây là, cho đến nay, giải pháp tốt nhất mặc dù.

Có các cột chiều cao bằng nhau là một quyết định hoàn toàn về mặt thẩm mỹ với không có chức năng. Như vậy, đây là một hành vi nên được bổ sung với nguyên tắc tăng cường tiến bộ; một ứng dụng tuyệt vời cho các trình duyệt có thể hỗ trợ nó.

Trường hợp xấu nhất, dự phòng, người dùng IE8 (2,1% và giảm http://www.w3schools.com/browsers/browsftimeExplorer.asp ) có được tất cả nội dung, tất cả chức năng , nhưng không thấy các cột có chiều cao bằng nhau. Khó có thể kết thúc của thế giới? Người dùng IE8 chắc chắn sẽ không bao giờ để ý.

Là một nhà thiết kế web có trách nhiệm trong công việc của bạn, nên giáo dục khách hàng về những gì có thể/không thể/có thể/mong muốn trên web. Có lẽ họ không biết tại sao làm một việc như vậy lại là một ý tưởng tồi, họ không phải là nhà thiết kế web.

0
Seth Warburton