Flexbox và Internet Explorer 11 (hiển thị: flex trong <html>?)

117

Tôi đang lên kế hoạch để tránh xa các bố cục "floaty" và sử dụng CSS flexbox cho các dự án trong tương lai. Tôi rất vui khi thấy tất cả các trình duyệt chính trong các phiên bản hiện tại của chúng dường như hỗ trợ flexbox (bằng cách này hay cách khác).

Tôi đã đi đến "Solved by Flexbox" để xem xét một số ví dụ. Tuy nhiên, ví dụ "Chú thích dính" dường như không hoạt động trong Internet Explorer 11. Tôi đã chơi xung quanh một chút và làm cho nó hoạt động bằng cách thêm display:flexvào <html>và width:100%vào<body>

Vì vậy, câu hỏi đầu tiên của tôi là: Có ai có thể giải thích logic đó cho tôi không? Tôi chỉ loay hoay và nó hoạt động, nhưng tôi không hiểu tại sao nó lại hoạt động như vậy ...

Sau đó, có ví dụ "Đối tượng truyền thông" hoạt động trong tất cả các trình duyệt ngoại trừ - bạn đoán nó - Internet Explorer. Tôi cũng loay hoay với điều đó, nhưng không có thành công.

Do đó, câu hỏi thứ hai của tôi là: Có khả năng "sạch" để lấy ví dụ "Đối tượng truyền thông" hoạt động trong Internet Explorer không?

— Kodekan
nguồn

1

Chỉ là một bản cập nhật cho câu hỏi cũ này: Bản demo được liên kết hoạt động tốt trên IE11. Phải là một lỗi đã được sửa trong 3 năm kể từ khi điều này được hỏi.

— Daryl

151

Theo http://caniuse.com/#feat=flexbox :

"IE10 và IE11 giá trị mặc định cho flexlà 0 0 autohơn 0 1 auto, theo dự thảo đặc tả, tính đến tháng 9 năm 2013"

Vì vậy, nói một cách dễ hiểu, nếu ở đâu đó trong CSS của bạn, bạn có một cái gì đó như thế này : flex:1, điều đó không được dịch theo cùng một cách trong tất cả các trình duyệt. Hãy thử thay đổi nó 1 0 0và tôi tin rằng bạn sẽ thấy ngay lập tức nó hoạt động.

Vấn đề là giải pháp này có thể sẽ gây rối cho firefox, nhưng sau đó bạn có thể sử dụng một số bản hack để chỉ nhắm vào Mozilla và thay đổi lại:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

Vì flexboxlà Ứng viên W3C và không chính thức, các trình duyệt có xu hướng cho kết quả khác nhau, nhưng tôi đoán điều đó sẽ thay đổi trong tương lai trước mắt.

Nếu ai đó có câu trả lời tốt hơn tôi muốn biết!

— Odisseas
nguồn

1

Tôi nghĩ điều đó có nghĩa là nhu cầu IE10 -ms-flex: 1 0 0;và IE11 flex: 1 0 0;..?

— Eystein

19

Với Google Chrome 39, điều này đột nhiên ngừng hoạt động đối với tôi. Mất nhiều thời gian để theo dõi, nhưng đó là đặc điểm kỹ thuật của chữ số thứ ba. Chrome 39 không tuân thủ flex: 1 0 0;. Nhưng flex: 1 0 0%;( chú ý % ) hoặc flex: 1 0 auto;sẽ làm việc.

— Eystein

Vâng, đây là sự thật nó đã phá vỡ một số thiết kế của tôi quá! Tôi đã sửa nó bằng cách thay đổi nó thành flex: 1;tôi đoán nó phụ thuộc vào những gì bạn sẽ làm, mặc dù ...

— Odisseas

1

Vấn đề cốt lõi với IE11 là cách tính toán flex-basis. Github có một cuộc thảo luận tốt về lý do tại sao flex:1 0 100%hoạt động trong một số trường hợp cho IE11 trong khi flex: 1 0 0%hoặc thậm chí flex: 1 0 autohoạt động trong những trường hợp khác. Bạn phải biết nội dung trước thời hạn.

— P.Brian.Mackey

Từ caniuse.com/#feat=flexbox , nó được đề cập cụ thể theo các vấn đề đã biết rằng IE 11 yêu cầu một đơn vị được thêm vào đối số thứ ba, thuộc tính cơ sở flex ..

— Henry Neo

49

Sử dụng một thùng chứa flex khác để khắc phục sự cố min-heighttrong IE10 và IE11:

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

Xem một bản demo làm việc .

Không sử dụng bố trí flexbox trực tiếp bodyvì nó vặn các phần tử được chèn thông qua các plugin jQuery (tự động hoàn tất, cửa sổ bật lên, v.v.).
Không sử dụng height:100%hoặc height:100vhtrên hộp chứa của bạn vì chân trang sẽ dính ở dưới cùng của cửa sổ và sẽ không thích ứng với nội dung dài.
Sử dụng flex-grow:1chứ không phải là flex:1nguyên nhân gây ra các giá trị mặc định IE10 và IE11 cho flexlà 0 0 autokhông 0 1 auto.

— BeliG
nguồn

3

Tôi thấy tôi phải thêm flex-direction: columnvào .ie-fixMinHeightđể tránh tác dụng phụ. Nếu bạn không có HTML cụ thể của IE, bạn có thể sử dụng.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— Đánh dấu Horgan

Tôi biết đây là 2 tuổi, nhưng cảm ơn bạn! Tôi đã theo dõi stackoverflow.com/a/24979148/359157 này và chiến đấu mãi mãi để tìm ra lý do tại sao IE bị đánh bại trong khi Edge và Chrome hoạt động hoàn hảo. Các heightvs min-heightlà chìa khóa.

— TyCobb

39

Bạn chỉ cần flex:1; Nó sẽ khắc phục sự cố cho IE11. Tôi thứ hai Odisseas. Ngoài ra chỉ định 100% chiều cao cho html, các yếu tố cơ thể .

Thay đổi CSS:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

url làm việc: http://jsfiddle.net/3tpuryso/13/

— Ashok Kumar Gupta
nguồn

Bạn có thể vui lòng giải thích thêm về vấn đề này: Có khả năng "sạch" để lấy ví dụ "Đối tượng truyền thông" hoạt động trong IE không?

— Ashok Kumar Gupta

1

Điều này làm việc cho tôi. Một điều tôi tìm thấy (vì nó bắt tôi ra) là nếu bạn có một yếu tố chứa, các display: flex;và phong cách liên quan phải được áp dụng cho cả các bodyvà container: jsfiddle.net/Skateside/nezdrrkr

— James dài

Đặt chiều cao html thành 100% dường như khiến nội dung mainngừng phát triển đúng cách (ít nhất là bằng chrome); nếu bạn thêm đủ nội dung, nó sẽ tràn ngập chân trang. jsfiddle.net/3tpuryso/65

— FoolishSeth

@FoolishSeth theo cách hiện tại, về cơ bản, bạn đang bảo nó tăng lên 100% và không phải là một pixel nữa. Bạn nên thiết lập htmlđể min-height: 100%thay vào đó, làm theo cùng với nội dung của bạn

— Odisseas

Cảm ơn! Phần bị thiếu đối với tôi không thực sự là bất kỳ thuộc tính flex nào, mà là chiều cao: 100% trên phần tử chứa (đối với tôi là div .pizer vì trang web của tôi có thanh bên phản hồi).

— zanther

0

Dưới đây là một ví dụ về việc sử dụng flex cũng hoạt động trong Internet Explorer 11 và Chrome.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

Mở rộng đoạn trích

— BadTree Lu
nguồn

15

Vui lòng cung cấp thêm thông tin - thay vì chỉ dán của bạn Html.

— Peter

7

Mặc dù câu trả lời này có thể đúng và hữu ích, nhưng nó được ưu tiên nếu bạn bao gồm một số giải thích cùng với nó để giải thích cách nó giúp giải quyết vấn đề. Điều này trở nên đặc biệt hữu ích trong tương lai, nếu có một sự thay đổi (có thể không liên quan) khiến nó ngừng hoạt động và người dùng cần phải hiểu nó đã hoạt động như thế nào.

— Erty Seidohl

0

Đôi khi, nó đơn giản như việc thêm: '-ms-' trước kiểu Like -ms-flex-Flow: row quấn; để làm cho nó cũng làm việc

— Marsel Grey
nguồn

3

Đôi khi, nhưng hầu hết thời gian không;) Hãy bỏ IE trên toàn cầu

— đào tạo