Chrome 和 Mozilla 计算保证金的方式不同答案

【问题标题】：Chrome and Mozilla count margin differentlyChrome 和 Mozilla 计算保证金的方式不同
【发布时间】：2017-07-18 10:38:42
【问题描述】：

我在一个元素中设置了 % margin top，而 Moz 和 Chr 以不同的方式计算它。这是我的代码：

#hohloma {
display:flex;
width:90%;
max-width: 537px; 
margin-top: 10%;
@media (min-width: 1000px) {
    width: 450px;
    height: 400px;
    background-image: url(../img/hohloma.png);
    background-repeat: no-repeat;
    background-size: contain;
    flex-direction:column;
    margin-left:4%;
    position:relative;

以及如何看待 Mozilla：

怎么看那个铬先生：

【问题讨论】：

这个 div 是 body 的孩子还是另一个父母？两种浏览器是否具有相同的视口尺寸？父母有固定的宽度吗？
这个 div 不是 body 的子元素，也不是其他 div 的父元素。尺寸相同。
我很抱歉我错了。它在体内......
请检查body宽度是否相同
是的。但我解决了这个问题。我拒绝了 % 并设置了 px...

标签： css google-chrome margin mozilla

【解决方案1】：

你应该确保包含的元素有一个固定的宽度，并且在两个浏览器中都是一样的。

% - 指定包含元素宽度百分比的边距

source

【讨论】：

宽度是固定的。