为什么margin-top与chrome和safari不同？

Question

1. Chrome和Safari都支持webkit。那么为什么margin-top与铬和野生动物园不同？

2. 有什么解决方案？我不想尝试padding-top ..因为某种原因。

这是响应式设计的演示代码。

<div id='demo'></div>

#demo{
    position:absolute;
    margin-top:22%;
    width:10%;
    border:1px black solid;
    height:5%;
}

JSFIDDLE

Answer 1

<强> ANWER

1. 我没有得到第一个问题的答案。

但我得到了第二个问题的答案。

    <div class='test'>
       <div id='demo'></div>
   </div>

#demo{
    position:absolute;
    width:10%;
    border:1px black solid;
    height:5%;
    bottom:0;
    right:0;
}
.test{
    position:relative;
    width: 500px;
    height:500px;
}

将position:relative添加到父div而不是margin-top我使用

bottom:0;  right:0;