Flex佈局在IE中的兼容性問題總結
以下代碼片段沒有特別說明,則均爲有兼容性問題的代碼
一、在IE10和IE11中,父容器中flex-direction:column 和 align-items:center,這倆屬性同時存在, 子容器內容過多會溢出容器
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
height: 200px;
justify-content: center;
align-items: center;
margin: 1em;
padding: 2em;
width: 300px;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
padding: 1em;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
The contents inside of this box are overflowing their container.
</div>
</div>
</body>
解決方式:給子容器加max-width: 100%
二、IE10和IE11下,父容器flex-direction:row,子容器內容過多會溢出容器
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: row;
height: 200px;
margin: 1em;
padding: 2em;
width: 300px;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
padding: 1em;
}
</style>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
The contents inside of this box are overflowing their container.
</div>
</div>
</body>
解決方式:給子容器加max-width: 100%
三、IE11中,父容器flex-direction:column,img無法保持寬高比縮放
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
height: 300px;
margin: 1em;
width: 300px;
}
img {
height: auto;
width: 100%;
}
</style>
</head>
<body>
<div class="FlexContainer">
<img src="http://placehold.it/800x200/333">
</div>
</body>
解決方式:給img包一層div
四、IE10和IE11中,父容器flex-direction:row,img無法保持寬高比縮放
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: row;
height: 300px;
margin: 1em;
width: 300px;
}
img {
height: auto;
width: 100%;
}
</style>
</head>
<body>
<div class="FlexContainer">
<img src="http://placehold.it/800x200/333">
</div>
</body>
解決方式:
IE10:父容器設置align-items
IE11:a.給img包一層div;b.容器設置align-items
五、IE10和IE11中,flex-direction: row,子容器設置flex-basis確切值(auto除外),子容器中 box-sizing:border-box不會生效
<style>
.FlexContainer {
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: row;
padding: 1em;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
border: 1em solid transparent;
box-sizing: border-box;
flex: 0 0 100%;
padding: 1em;
text-align: center;
}
</style>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">Item with padding and border</div>
</div>
</body>
解決:
a.子容器中flex-basis設置auto,且設置width:100%
b. 給子項再包裹一個容器,把這個容器當成flex容器的子項,在這個容器上設置 flex: 0 0 100%。
六、IE10和IE11: 內斂元素不能作爲彈性伸縮項目,包括:before 和 ::after 這些僞類元素。
IE11修復了這個bug,但是 :before 和 ::after 仍然不能作爲伸縮彈性項目。
解決:給內聯元素加個 display: block; 即可。
七、給flex簡寫加 !important,在IE10,只對前兩個參數有效,第三個參數無效。
flex: 0 0 100%!important;
解決:
這個bug在IE11修復。而在IE10,再單獨寫上flex-bsis即可