固定位置弹性盒和大众单元的跨浏览器问题 [英] Cross-browser issues with fixed-position flexbox and VW units
问题描述
我正在尝试在flexbox容器中放置一个固定的子div，但是遇到了Firefox和Chrome之间的浏览器兼容性问题.使用大众单位调整子div上的边距会导致每个浏览器中的测量结果不同.谁能告诉我哪个浏览器具有正确的解释，以及是否有任何变通办法来使两者一致显示?
I'm trying to position a fixed child div inside of a flexbox container, but running into browser compatibility issues between Firefox and Chrome. Using VW units to adjust margins on the child div results in different measurements in each browser. Can anyone tell me which browser has the correct interpretation and if there's any workaround to get both displaying consistently?
我在这里工作过CodePen: https://codepen.io/japongnet/pen/YbgZww
I've worked on a CodePen here: https://codepen.io/japongnet/pen/YbgZww
.parent {
background-color: #333333;
border: 1px solid black;
color: white;
width: 90vw;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: #aaabbb;
width: 200px;
height: 200px;
margin-left: 50vw;
position: fixed;
}
<div class="parent">
<div class="child">
Child
</div>
</div>
这是Firefox中的输出:
Here's the output in Firefox:
在Chrome中:
And in Chrome:
推荐答案
我会说firefox在这里是正确的，但是Chrome并没有违反任何规范，也可以是正确的.
I would say firefox is the correct one here but Chrome isn't violating any specfication and can also be correct.
该问题与以下事实有关:您未设置left或right值，并且浏览器正在考虑静态位置以标识元素的位置.
The issue is related to the fact that you are not setting left or right value and the browser is considering the static position to identify the position of the element.
来自规范
在本节及下一节中，(一个元素的)术语静态位置"大致是指一个元素在正常流中应具有的位置.更精确地:
For the purposes of this section and the next, the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow. More precisely:
- 静态位置包含块是假设框的包含块，如果其指定的位置"值为静态" 且其指定的浮动"一直没有. (请注意，由于第9.7节中的规则，此假设计算可能还需要假设'display'的计算值不同.)
- 左侧"的静态位置是从包含块的左侧边缘到假设框的左侧边缘的距离，如果其位置"属性具有是静态" ，而浮动"是无".如果假设框位于包含块的左侧，则该值为负.
- "right"的静态位置是从包含块的右边缘到与上述相同假设框的右边缘的距离.如果假设框位于包含块的边缘的左侧，则该值为正.
- The static-position containing block is the containing block of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static' and its specified 'float' had been 'none'. (Note that due to the rules in section 9.7 this hypothetical calculation might require also assuming a different computed value for 'display'.)
- The static position for 'left' is the distance from the left edge of the containing block to the left margin edge of a hypothetical box that would have been the first box of the element if its 'position' property had been 'static' and 'float' had been 'none'. The value is negative if the hypothetical box is to the left of the containing block.
- The static position for 'right' is the distance from the right edge of the containing block to the right margin edge of the same hypothetical box as above. The value is positive if the hypothetical box is to the left of the containing block's edge.
然后再来
- "left"和"right"为"auto"，"width"不是"auto"，则如果建立静态位置包含块的元素的"direction"属性为"ltr"，则设置为""左"设置为静态位置，否则将右"设置为静态位置.然后求解"left"(如果"direction"为"rtl")或"right"(如果"direction"为"ltr").
- 'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
基本上，我们没有为元素设置任何左值，因此如果将元素的左值设置为position:static
Basically, we didn't set any left value to our element so the browser will use the left value of the element if it was set to position:static
在设置position:fixed之前，我们具有与所有浏览器相同的以下内容:
Before setting position:fixed we have the following which is the same in all the browsers:
.parent {
background-color: #333333;
border: 1px solid black;
color: white;
width: 90vw;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: #aaabbb;
width: 200px;
height: 200px;
margin-left: 50vw;
}
<div class="parent">
<div class="child">
Child
</div>
</div>
如果我们添加position:fixed，则该元素不应移动，并且应保持相同的位置(仅在Firefox中如此):
If we add position:fixed the element should not move and the same position should be kept which is the case in Firefox only:
.parent {
background-color: #333333;
border: 1px solid black;
color: white;
width: 90vw;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: #aaabbb;
width: 200px;
height: 200px;
margin-left: 50vw;
position:fixed;
}
<div class="parent">
<div class="child">
Child
</div>
</div>
根据相同的规范，我们还可以阅读:
From the same specification we can also read:
但是，用户代理可以随意猜测其可能的位置，而不是实际计算该假设框的尺寸.
But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position.
考虑到这一点，我们不能说chrome做错了. Chrome浏览器正在考虑未按如下所示指定margin-left的元素的静态位置:
Considering this we cannot say chrome is doing wrong. Chrome is considering the static position of the element without margin-left specified like below:
.parent {
background-color: #333333;
border: 1px solid black;
color: white;
width: 90vw;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: #aaabbb;
width: 200px;
height: 200px;
}
<div class="parent">
<div class="child">
Child
</div>
</div>
然后添加position:fixed:
.parent {
background-color: #333333;
border: 1px solid black;
color: white;
width: 90vw;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: #aaabbb;
width: 200px;
height: 200px;
position:fixed;
}
<div class="parent">
<div class="child">
Child
</div>
</div>
然后添加左边距:
.parent {
background-color: #333333;
border: 1px solid black;
color: white;
width: 90vw;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: #aaabbb;
width: 200px;
height: 200px;
margin-left: 50vw;
position:fixed;
}
<div class="parent">
<div class="child">
Child
</div>
</div>
要确保您具有相同的行为，您需要指定left或right:
To make sure you will have the same behavior you need to either specify left or right:
.parent {
background-color: #333333;
border: 1px solid black;
color: white;
width: 90vw;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.child {
background-color: #aaabbb;
width: 200px;
height: 200px;
left: 50vw;
position:fixed;
}
<div class="parent">
<div class="child">
Child
</div>
</div>
这篇关于固定位置弹性盒和大众单元的跨浏览器问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
