css相对定位不适用于chrome

use*_*396 9 html css positioning

我在Google Chrome中的相对定位存在问题以下代码在IE中运行良好,但在Chrome中运行不正常.相对定位相对于元素的正常位置.红色框的正常位置在黑匣子的正下方.如果我添加10%的空间,红色框应该在正常位置下出现10%.

的jsfiddle

HTML

 <body>
 <div id="outer">
     <div id="inner1">
     </div>
     <div id="inner2">
     </div>
 </div>
 </body
Run Code Online (Sandbox Code Playgroud)

CSS

 #outer
 {
     position:absolute;     
     left:20%;
     right:20%;
     bottom:20%;
     top:20%;
     background-color:Blue;
  }

  #inner1
  {
      position:relative;
      width:20%;
      height:20%;
      background-color:Black; 
   }

   #inner2
   {
       position:relative;
       top:10%;   
       width:20%;
       height:20%;
       background-color:Red; 
   }
Run Code Online (Sandbox Code Playgroud)

Wil*_*ilt 9

要使相对定位起作用,父级应具有以下大小:

width: 100%;
height: 100%;
Run Code Online (Sandbox Code Playgroud)

检查这个小提琴的结果