Vertical Aligning - Hộp Flex10 của IE10 không hoạt động

Question

Tôi đã căn giữa để làm việc trong tất cả các trình duyệt hỗ trợ nó ngoài IE10. Tôi nghĩ rằng tôi có cú pháp đúng và nó hỗ trợ nó. Bất cứ ai có thể giúp đỡ? DEMO

html { 
    height: 100%; 
} 
body { 
    background: red; 
    font-family: 'Open Sans'; 
    min-height: 100%; 
    width: 100%; 
    display: -webkit-box; 
    -webkit-box-orient: horizontal; 
    -webkit-box-pack: center; 
    -webkit-box-align: center; 
    display: -moz-box; 
    -moz-box-orient: horizontal; 
    -moz-box-pack: center; 
    -moz-box-align: center; 
    display: -ms-flexbox; 
    -ms-box-orient: horizontal; 
    -ms-box-pack: center; 
    -ms-box-align: center; 
    display: box; 
    box-orient: horizontal; 
    box-pack: center; 
    box-align: center; 
    text-align: center; 
} 
.box { 
    background: none repeat scroll 0 0 #E7F3FF; 
    border: 4px solid #FFFFFF; 
    border-radius: 16px 16px 16px 16px; 
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2); 
    color: #054B98; 
    height: 620px; 
    margin: 0 auto 20px; 
    position: relative; 
    width: 930px; 
} 

Answer 1

Bạn có giá trị hiển thị phù hợp, nhưng tất cả các thuộc tính Flexbox khác mà bạn đang sử dụng đều sai. Bản dịch thích hợp sẽ là như thế này:

body { 
    background: red; 
    font-family: 'Open Sans'; 
    min-height: 100%; 
    width: 100%; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 

    -webkit-box-align: center; 
    -moz-box-align: center; 
    -ms-flex-line-pack: center; 
    -webkit-align-content: center; 
    align-content: center; 
} 

Tuy nhiên, nếu bạn đang sử dụng Flexbox cho các mục đích liên kết dọc, điều này có thể là những gì bạn đang cần thay:

body { 
    background: red; 
    font-family: 'Open Sans'; 
    min-height: 100%; 
    width: 100%; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -ms-flex-pack: center; 
    -webkit-justify-content: center; 
    justify-content: center; 

    -webkit-box-align: center; 
    -moz-box-align: center; 

    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
} 

Lưu ý rằng hộp-align và flex-align/align-items là không phải là các thuộc tính tương đương, nhưng chúng đang thực hiện cùng một tác vụ ở đây.

Answer 2

Thêm chiều cao rõ ràng có vẻ là giải pháp thích hợp.

Từ: Microsoft Connect - Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview

Trong tất cả các trình duyệt khác có hỗ trợ flexbox, một flex-direction:column dựa chứa flex sẽ tôn vinh những container min-height để tính toán flex-grow dài. Trong IE10 & 11-xem trước nó chỉ có vẻ hoạt động với giá trị height rõ ràng.