在下面的代码中,使用Internet Explorer 11时,小屏幕上的段落没有被包裹。通过搜索解决方案,我发现如果 flex-basis:100%
或 width:100%
适用于 .fix
div,那么段落就会被包裹起来,但是这种方法破坏了我的布局。有什么办法可以解决这个问题?
Internet Explorer 11的输出。
.container-1 {
display: flex;
justify-content: flex-end;
border: 1px solid red;
}
.container-2 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
border: 1px solid blue;
}
<div class='container-1'>
<div class='fix'>
<div class='container-2'>
<p>Center Aligned Content</p>
<p>Some content goes here. Some content goes here. Some content goes here. </p>
</div>
</div>
</div>
你遇到了几个涉及flex和IE11的问题。
试试这个。
.container-1 {
display: flex;
justify-content: flex-end;
border: 1px solid red;
}
.fix {
display: flex;
}
.container-2 {
width: 100%;
display: flex;
flex-direction: column;
text-align: center;
border: 1px solid blue;
}
<div class='container-1'>
<div class='fix'>
<div class='container-2'>
<p>Center Aligned Content</p>
<p>Some content goes here. Some content goes here. Some content goes here. </p>
</div>
</div>
</div>
这里是问题的解释
我想我们可以自动设置 fix
宽度。我们需要使用JavaScript来设置它。如果窗口的大小调整为 container-1
宽度与 container-2
宽度,然后我们可以设置 fix
宽度为100%。如果我们重新调整尺寸,那么我们就会删除 fix
宽度。
关于工作演示,你可以参考下面的示例,它已经在IE 11中测试过。
var c1 = document.getElementsByClassName('container-1')[0];
var c2 = document.getElementsByClassName('container-2')[0];
var fix = document.getElementsByClassName('fix')[0];
document.getElementById('c2').innerText = c2.offsetWidth;
var c2width = parseFloat(document.getElementById('c2').innerText);
function setStyle() {
if (c1.offsetWidth <= c2.offsetWidth) {
fix.style.width = '100%';
}
if (c2.offsetWidth > c2width) {
fix.style.width = '';
}
}
window.onresize = setStyle;
.container-1 {
display: flex;
justify-content: flex-end;
border: 1px solid red;
}
.container-2 {
display: flex;
flex-direction: column;
text-align: center;
border: 1px solid blue;
}
<div class='container-1'>
<div class='fix'>
<div class='container-2'>
<p>Center Aligned Content</p>
<p>Some content goes here. Some content goes here. Some content goes here. </p>
</div>
</div>
</div>
<div id="c2" style="display:none"></div>
在IE 11中的结果如下。
经过长时间的研究,我发现如果 .fix
鸿沟 overflow:hidden
式,那么问题就解决了。
.container-1 {
display: flex;
justify-content: flex-end;
border: 1px solid red;
}
.fix {
overflow: hidden;
}
.container-2 {
display: flex;
flex-direction: column;
text-align: center;
border: 1px solid blue;
}
<div class='container-1'>
<div class='fix'>
<div class='container-2'>
<p>Center Aligned Content</p>
<p>Some content goes here. Some content goes here. Some content goes here. </p>
</div>
</div>
</div>