title: firefox's strange behavior using jQuery animate method and absolute position
body: <p>I have a problem when I'm using jQuery's(jQuery1.9.1) animate method. 
  Here is my code in jsfiddle: <a href="http://jsfiddle.net/AySas/3/" rel="nofollow">http://jsfiddle.net/AySas/3/</a> 
  I want to make the div wider using the relative percentage, ie:</p>
  
  <pre><code>html:
  &lt;div id="h_divCenter"&gt;
      &lt;div id="h_divIETodos" &gt;
          &lt;div id="h_divIIEodoList" class="quadContent"&gt;
              &lt;ul id="h_ulIETodoList"&gt;
                  &lt;li&gt;itemC 3&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>css:
  #h_divCenter {
      position:absolute;
      top:0;
      left:20px;
      right:100px;
      bottom:0;
      margin: 5px;
      background: #0FF;
  }
  .quadContent {
      position: absolute;
      top: 41px;
      bottom: 2px;
      padding: 1px 1% 2px 1%;
      width: 98%;
  
  }
  #h_ulIETodoList,#h_ulIUTodoList,#h_ulUETodoList,#h_ulUUTodoList {
      width: 100%;
      height: 100%;
      list-style-type: none;
      overflow: auto;
  }
   #h_divIETodos {
      position: absolute;
      margin: 2px;
      top: 0;
      left: 0;
      right: 50%;
      bottom: 50%;
      color: #DE3C3C;
      border: 1px solid #DE3C3C;
       -webkit-box-shadow: 0px 0px 10px #DE3C3C;
       -moz-box-shadow: 0px 0px 10px #DE3C3C;
       box-shadow: 0px 0px 10px #DE3C3C;
   }
  
  
  javascript:
  $('#btnTest').on("click", function(){
      $("#h_divIETodos").animate({
          right: "+=20%"
      },500);
  });
  </code></pre>
  
  <p>And this div has a absolute position and I have set the top,right,bottom,left properties of css. It works fine in chrome. But in firefox, you can see the right edge of the div cannot move by "20%". Has someone else encountered with the similar problem before? I really appreciate your help. Many thanks! </p>