jQuery - css ('chiều rộng đường viền') trở lại dưới dạng chuỗi trống trên Firefox nhưng không phải trên Chrome

Question

Tôi đang cố gắng gỡ rối vấn đề trình duyệt chéo với jQuery/CSS của mình.

Tôi đang cố gắng để có được chiều rộng đường viền của một lớp. Các lớp được thiết lập trong CSS như sau:

.mod_button { 
    position: relative; 
    color: #fff; 
    border-color: #06253e; 
    border-width: 1px; 
    border-style: solid; 
} 

Trong jQuery, tôi đang cố gắng để có được biên độ rộng như vậy:

var bWidth = $('.mod_button').css('border-width'); 

Điều này dường như trở lại đúng như là một chuỗi của "1px" trong Chrome. Tuy nhiên, trong Firefox nó luôn luôn trả về dưới dạng một chuỗi rỗng "". Tôi đã kiểm tra các kết quả này thông qua các trình gỡ rối JS trong các công cụ phát triển trên cả Chrome và Firefox.

Tôi đã thử các loại hạt cố gắng gỡ lỗi vấn đề này và dường như tôi không thể tìm thấy bất kỳ câu trả lời ngắn gọn nào. Có lẽ cộng đồng ở đây có thể cho tôi một đầu mối về cách tôi có thể khắc phục vấn đề này.

Cảm ơn bạn!

Answer 1

Các thuộc tính như "biên giới", "nền" và thậm chí là "chiều rộng đường viền" là viết tắt. Chúng không được hỗ trợ. Thay vào đó, hãy sử dụng các thuộc tính cụ thể hơn: "border-top-width", "border-bottom-width".

Các dòng sau nên làm việc trong tất cả các trình duyệt:

var bWidth = $('.mod-button').css('border-top-width'); 

câu hỏi liên quan: Getting CSS border value with jQuery in Firefox 14.0.1