gpt4 book ai didi

html - Flexbox 和 Position Absolute without Top/Bottom in Chome vs. FF & IE

转载 作者:行者123 更新时间:2023-11-28 02:49:58 24 4
gpt4 key购买 nike

<分区>

我发现 Chrome 和 Firefox/Safari 在 flexbox 实现上存在差异。当你有一个没有设置 top/bottom/left/right 的 position absolute 元素时,在 Chrome 中,该元素将对齐 top: 0, left: 0,而在其他浏览器中,top 和 left 值与该元素相同是静态定位的。

Take a look at the codepen here.

对于这种情况,flexbox 规范的建议是什么?哪些浏览器或哪些浏览器表现出错误行为?

HTML

<div class="flex">
<div class="offset">Offset</div>
<div class="absolute">Absolute</div>
</div>

CSS

.flex {
display: flex;
flex-direction: column;
width: 300px;
background: #eee;
height: 200px;
padding: 8px;
}
.offset {
width: 300px;
height: 96px;
background: #ccc;
margin-bottom: 8px;
}
.absolute {
position: absolute;
background: red;
color: white;
width: 300px;
height: 96px;
}

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com