lấy lề được tính toán tự động trong firefox với jQuery

Question

Với đánh dấu và css bên dưới, tôi đã cố gắng để có được lề trái được tính toán của trình bao.

<section class="page-title"> 
     <div class="shell"> 
     <h5 class="title">Welcome!</h5> 
     </div> 
    </section> 

.shell { 
    zoom: 1; 
    max-width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 16px; 
    padding-right: 16px; 
} 

Sử dụng

parseInt($('.shell').css('marginLeft')) 

nó hoạt động trong Chrome, Safari, IE9 nhưng đáng ngạc nhiên không hoạt động trong Firefox. Đã thử cách tiếp cận khác:

($('.shell').outerWidth(true) - $('.shell').outerWidth())/2 

Cũng hoạt động tốt nhưng Firefox. Vì vậy, tôi đoán firefox không hỗ trợ để có được css không xác định với jQuery? Một cách thẳng tiến để làm việc với nó là:

($('.page-title').width() - $('.shell').outerWidth())/2 

Nhưng tôi tự hỏi nếu có cách nào tốt hơn.

Answer 1

Khi bạn nói nó không hoạt động, bạn có nhận được lỗi (trong bảng điều khiển) hay không trả về 0? Trả lại 0 cho cài đặt tự động, rõ ràng là một vấn đề với các trình duyệt khác nhau.

Bạn có thể sử dụng thư viện jSizes nhẹ để trả về tất cả chỉ số tính bằng pixel. Điều này sẽ giúp bạn tiết kiệm được việc phải xung quanh với outerWidth, v.v.