Tương đương với div display inline-block cho IE8, IE7 và các trình duyệt cũ hơn

Question

Đây là một câu hỏi khá chung chung về khả năng tương thích giữa các trình duyệt.

Tại các điểm khác nhau trong thiết kế, tôi đang làm việc theo cách duy nhất để đạt được bố cục và kiểu mà tôi muốn (không sử dụng hình ảnh) là sử dụng tùy chọn phong cách css display:inline-block. Tuy nhiên, điều này không được hỗ trợ bởi IE8 và các trình duyệt cũ hơn và kết quả này trong thiết kế của tôi bị hỏng.

Vì vậy, có hai phần cho câu hỏi của tôi 1 - Có phương pháp đạt được hiệu ứng tương tự hoặc tương đương cho IE8 không? 2 - Nếu không, làm thế nào tốt nhất tôi có thể làm cho thiết kế của tôi suy giảm thuận lợi?

Để bạn tham khảo, đây là ví dụ về địa điểm này đang được sử dụng trong thiết kế của tôi.

<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct

Nó là một 20x20 khối điểm ảnh màu để giải thích các màu sắc trong đồ thị.

Thông thường, sự cố này phát sinh bất cứ khi nào tôi muốn định dạng lớn hơn & kiểm soát bố cục trên một đoạn văn bản cụ thể, v.v. bên trong nội dung văn bản.

Trong thiết kế tôi hiện đang làm việc, tôi sẽ không hỗ trợ cho các loại trình duyệt cũ hơn vì nó phụ thuộc nhiều vào phần tử canvas. Tuy nhiên, tôi nghĩ đây sẽ là một câu hỏi hay để hỏi khi tôi gặp vấn đề này vài lần trước đây.

Cảm ơn

Answer 1

Dưới đây là một nguồn lực tốt bao gồm chủ đề này: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Về cơ bản IE có kích hoạt gọi là "hasLayout". Kích hoạt điều này sẽ cho phép bạn sử dụng display:inline-block trên phần tử mức khối (theo mặc định, IE chỉ cho phép chặn nội tuyến trên các phần tử nội tuyến gốc).

Ngoài ra phiên bản cũ hơn của Fire Fox cũng không hỗ trợ inline-block, nhưng có giá trị "inline-stack" (moz-inline-stack).

Dưới đây là, để kiến ​​thức của tôi, cách tốt nhất để có được một trình duyệt chéo display:inline-block:

display:-moz-inline-stack; 
display:inline-block; 
zoom:1; 
*display:inline; 

Answer 2

sử dụng mã này

*display: inline; 
*vertical-align: middle; 

Answer 3

Như trao here:

IE hỗ trợ inline-block, nhưng chỉ cho các phần tử nguyên bản là nội tuyến. Vì vậy, nếu bạn thực sự muốn sử dụng inline-block, bạn đang hạn chế để nhịp và strongs và ems ...

Vâng, nó không phải là hợp lý, bởi vì thường nó không quan trọng nếu bạn sử dụng div hoặc span ... nhưng hãy nhớ - đây là IE :)

Vì vậy, chỉ cần thay đổi <div> thành <span> và đó là nó!

Answer 4

display: inline-block; 
    *zoom: 1; 
    *display: inline; 

bạn có thể thêm khối nội tuyến cho trình duyệt khác nhưng đối với IE, bạn có thể thêm kiểu với *. nó chỉ hoạt động trong tức là