CSS flexbox không làm việc trong IE10

Question

Trong IE10, mã này không hoạt động chính xác:

.flexbox form { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    -moz-flex-direction: row; 
    -ms-flex-direction: row; 
    -o-flex-direction: row; 
    flex-direction: row; 
} 

.flexbox form input[type=submit] { 
    width: 31px; 
} 

.flexbox form input[type=text] { 
    width: auto; 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    display: flex; 
    -webkit-flex: auto 1; 
    -moz-flex: auto 1; 
    -ms-flex: auto 1; 
    -o-flex: auto 1; 
    flex: auto 1; 
} 

gì nên xảy ra là input[type=submit] nên 31px rộng, với input[type=text] chiếm phần còn lại của không gian có sẵn trong form . Điều gì xảy ra là input[type=text] chỉ mặc định là 263px vì một số lý do.

Tính năng này hoạt động tốt trong Chrome và Firefox.

Answer 1

Chế độ bố cục Flex chưa hoàn toàn được hỗ trợ trong IE. IE10 thực hiện phiên bản "tween" của spec mà không hoàn toàn gần đây, nhưng vẫn hoạt động.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

bài viết CSS-Tricks này có một số lời khuyên về sử dụng qua trình duyệt của flexbox (bao gồm cả IE): http://css-tricks.com/using-flexbox/

chỉnh sửa: sau khi nghiên cứu hơn một chút, IE10 chế độ bố trí flexbox thực hiện hiện tại để các tháng 3 năm 2012 của W3C dự thảo spec: http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/

dự thảo mới nhất là một năm hoặc lâu hơn gần đây: http://dev.w3.org/csswg/css-flexbox/

Answer 2

Như Ennui đã đề cập, IE 10 hỗ trợ -ms phiên bản tiền tố của Flexbox (IE 11 hỗ trợ nó không cố định). Các lỗi tôi có thể nhìn thấy trong mã của bạn là:

• Bạn nên có display: -ms-flexbox thay vì display: -ms-flex
• Tôi nghĩ bạn nên xác định tất cả 3 flex giá trị, như flex: 0 1 auto để tránh nhập nhằng

Vì vậy, trận chung kết mã được cập nhật là ...

.flexbox form { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flexbox; 
    display: -o-flex; 
    display: flex; 

    /* Direction defaults to 'row', so not really necessary to specify */ 
    -webkit-flex-direction: row; 
    -moz-flex-direction: row; 
    -ms-flex-direction: row; 
    -o-flex-direction: row; 
    flex-direction: row; 
} 

.flexbox form input[type=submit] { 
    width: 31px; 
} 

.flexbox form input[type=text] { 
    width: auto; 

    /* Flex should have 3 values which is shorthand for 
     <flex-grow> <flex-shrink> <flex-basis> */ 
    -webkit-flex: 1 1 auto; 
    -moz-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    -o-flex: 1 1 auto; 
    flex: 1 1 auto; 

    /* I don't think you need 'display: flex' on child elements */
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: -o-flex; 
    display: flex; 
    /**/ 
} 

Answer 3

IE10 đã sử dụng cú pháp cũ. Vì vậy:

display: -ms-flexbox; /* will work on IE10 */ 
display: flex; /* is new syntax, will not work on IE10 */ 

thấy css-tricks.com/snippets/css/a-guide-to-flexbox:

(tweener) có nghĩa là một cú pháp không chính thức lẻ từ [2012] (ví dụ hiển thị: flexbox;)

Answer 4

Xin lưu ý rằng mục flex nên display: block; trong IE10.