Phát hiện Hỗ trợ trình duyệt để hiển thị: inline-block

Question

Làm thế nào bạn có thể phát hiện xem trình duyệt có hỗ trợ hiển thị thuộc tính CSS: inline-block không?

Answer 1

Không có cách nào để phát hiện điều đó với Javascript vì nó là thuộc tính CSS thuần túy không liên quan đến bất kỳ đối tượng hoặc hàm nào trong Javascript. Điều tốt nhất tôi có thể nói với bạn là kiểm tra here để có danh sách tương thích khá tốt và sử dụng CSS để tạo giải pháp thay thế.

Answer 2

Theo QuirksMode charts, các trình duyệt chính chỉ không hỗ trợ inline-block là IE6 và 7. (Vâng, họ hỗ trợ nó, nhưng chỉ cho các yếu tố trong đó có một nguồn gốc display loại inline.) Tôi muốn chỉ là giả định nó được hỗ trợ và sau đó áp dụng giải pháp thay thế cho IE6/7 qua conditional comments.

(Lưu ý:. Tôi bỏ qua thiếu sự hỗ trợ Firefox 2 cho inline-block và giả đại đa số người dùng đã nâng cấp lên FF3, nhưng googling ngắn gọn không khai quật bất kỳ số điện thoại để trở lại mà lên YMMV.)

Nếu xác định hỗ trợ từ JavaScript là lựa chọn duy nhất của bạn, tuy nhiên, bạn sẽ phải quay trở lại với tác nhân người dùng đánh hơi. Lớp YAHOO.env.ua từ YUI library là một đoạn mã tiện dụng mà bạn có thể sao chép và sử dụng. (Đó là BSD được cấp phép, không phụ thuộc vào các phần khác của thư viện YUI và chỉ khoảng 25-30 dòng không có nhận xét)

Answer 3

Vâng, đây là những gì bạn có thể thực hiện nếu bạn muốn làm điều đó hoàn toàn bằng cách kiểm tra bavhiour của trình duyệt w/javascript thay vì tác nhân người dùng đánh hơi:

Thiết lập kịch bản thử nghiệm và kịch bản điều khiển. Với, nói rằng, cấu trúc sau:

• div
  • div w/nội dung "test"
  • div w/nội dung "test2"

Chèn một bản sao vào tài liệu với hai div nội bộ được đặt thành inline-block và chèn một bản sao khác vào tài liệu với hai div nội bộ được đặt thành chặn. Nếu trình duyệt hỗ trợ chặn nội tuyến, thì các div chứa có các độ cao khác nhau.

câu trả lời khác:

Bạn cũng có thể sử dụng getComputedStyle để xem cách trình duyệt được điều trị css một yếu tố cho trước. Vì vậy, về mặt lý thuyết, bạn có thể thêm một phần tử với "display: inline-block" và sau đó kiểm tra computedStyle để xem phần tử đó có tồn tại hay không. Chỉ có vấn đề: IE không hỗ trợ getComputedStyle. Thay vào đó, nó có currentStyle. Tôi không biết liệu các hàm currentStyle có giống nhau hay không (có lẽ nó hoạt động tương tự như hành vi mà chúng ta muốn: bỏ qua các giá trị "không hợp lệ").

Answer 4

Nhân tiện: Có a neat way để triển khai các khối nội tuyến trình duyệt chéo trong IE6 +, FF2 +, Opera và WebKit bằng CSS một mình. (Không phải CSS hợp lệ, nhưng vẫn chỉ có CSS.)

Answer 5

Christopher Swasey là hoàn toàn chính xác.

Tôi đã thiết lập bản trình diễn jsFiddle về kỹ thuật của mình tại http://ajh.us/test-inline-block.

Mã này về cơ bản là:

var div = document.createElement('div'); 
div.style.cssText = 'display:inline-block'; 

// need to do this or else document.defaultView doesn't know about it 
$('body').append(div); 
// that was jQuery. It’s possible to do without, naturally 

var results = false; 

if (div.currentStyle) { 
    results = (div.currentStyle['display'] === 'inline-block'); 
} else if (window.getComputedStyle) { 
    results = document.defaultView.getComputedStyle(div,null).getPropertyValue('display')=== 'inline-block'; 
} 

//clean up 
$(div).remove(); 

alert('display: inline-block support: '+results); 

Xin lưu ý kỹ thuật tương tự chính xác này cũng làm việc để phát hiện display: run-in hỗ trợ.