- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在 flexbox 中放置一个正方形的 div。所以我使用:
.outer {
display: flex;
width: 100%;
background: blue;
}
.inner {
width: 50%;
background: yellow;
padding-bottom: 50%;
}
<div class="outer">
<div class="inner">
<a>hehe</a>
</div>
</div>
这在 Chrome 中运行良好。但在 Firefox 中,父级只占一行。
我如何在 Firefox 中解决这个问题?我使用的是 44 版。
您还可以在 https://jsbin.com/lakoxi/edit?html,css 查看代码
最佳答案
2018 年更新
flexbox 规范已更新。
4.2. Flex Item Margins and Paddings
Percentage margins and paddings on flex items, like those on blockboxes, are resolved against the inline size of their containing block,e.g. left/right/top/bottom percentages all resolve against theircontaining block’s width in horizontal writing modes.
原答案 - 适用于 2018 年之前发布的 FF 和 Edge 版本
Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.
还有一些:
4.2. Flex Item Margins and Paddings
Percentage margins and paddings on flex items can be resolved against either:
- their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
- the inline axis (left/right/top/bottom percentages all resolve against width)
A User Agent must choose one of these two behaviors.
Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended.
关于html - 为什么百分比填充/边距不适用于 Firefox 和 Edge 中的 flex 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42741702/
我是一名优秀的程序员,十分优秀!