绝对定位的弹性项目不会从 IE11 中的正常流程中删除 [英] Absolutely positioned flex item is not removed from the normal flow in IE11

查看:23
本文介绍了绝对定位的弹性项目不会从 IE11 中的正常流程中删除的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们有两个带有内容的 div,第三个 div 是具有绝对位置的背景.

容器是一个弹性盒子.

在 Chrome 和 Safari 中一切正常,但 Firefox 和 IE11 会影响绝对定位的 div,并在 div 之间分配空间,就像连续 3 个 div 一样.

我已经制作了 jsfiddle 示例.有没有办法修复这个bug?https://jsfiddle.net/s18do03e/2/

div.container {显示:弹性;弹性方向:行;宽度:100%;高度:300px;对齐内容:间隔;宽度:100%;轮廓:1px 实心;}div.c1 {背景:#aaeecc;宽度:100px;位置:相对;z-索引:50;顶部:20px;显示:弹性;}div.c2 {背景:#cceeaa;宽度:200px;位置:相对;z-索引:50;顶部:20px;显示:弹性;}div.bg {背景:#ccc;宽度:100%;高度:100%;z-索引:0;左:0px;顶部:0px;位置:绝对;显示:弹性;}

<div class="c1">内容 1</div><div class="c2">内容 2</div><div class="bg">背景</div>

解决方案

发生这种情况是因为 justify-content: space-between; 均匀分布项 开始的第一项,最后的项结尾.所以只需在

Content 1

内容2

像这样

<div class="c1">内容 1</div><div class="bg">背景</div><div class="c2">内容 2</div>

你可以在 https://developer.mozilla.org/en 上看到原因-US/docs/Web/CSS/justify-content

We have two divs with content and a third div that is a background with absolute position.

Container is a flexbox.

All works fine in Chrome and Safari, but Firefox and IE11 factors in the absolute positioned div, and distributes space between divs like there are 3 divs in a row.

I've made jsfiddle example. Is there any way to fix this bug? https://jsfiddle.net/s18do03e/2/

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}

<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>

解决方案

It is happening because justify-content: space-between; Distribute items evenly The first item at the start, the last at the end. So just putt <div class="bg">Background</div> between <div class="c1">Content 1</div> and <div class="c2">Content 2</div> like this

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>

</div>

You can see the reason on https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

这篇关于绝对定位的弹性项目不会从 IE11 中的正常流程中删除的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆