button relative position changes after screen resize

问题

I have a button positioned in the lower right corner of a page. My problem is 1) Firefox seems to place the button in a different position than Chrome or IE9, and 2) the relative position of the button changes when I resize the screen after the initial load.

I found a hack on SO that seems to help the FF problem (see code)...but I am still having the issue of the button reposition after the initial page load. In all 3 browsers, the button is placed perhaps 15 pixels higher (away from the bottom border) when first opening the page, but then on any resize (maximize or pulling the screen border with the mouse) the button moves lower toward the bottom border, and then stays in that relative position as I change the screen size.

Is there a way I can make the initial button position the same as its position after I resize the screen? I'm using JQuery Mobile and ArcGIS Javascript API (built on Dojo) btw...

CSS:

#mainPage{
position:relative;
overflow: hidden;
width: 100%; 
height: 100%;
}

#innerPage{    
border: 0;
position:relative;
width: 100%; 
height: 100%; 
overflow: hidden;

}

#map {
width:100%;
height:100%;
z-index: 1;
border: 0;
position: relative;

}

.btnClass{
position: absolute; 
z-index: 10000;
bottom: 8em;
right: 4%;
max-width:100px;
min-width:100px;
margin-bottom: 4em;
}


@media screen and (min--moz-device-pixel-ratio:0) {
.btnClass {
    bottom: 10em;
  }
}

HTML:

<div id="mainPage">
<div data-role="page" id="mapPage" >
    <div id="map">
        <div id="btnDiv" class ="btnClass">         
            <button id ='credits'   data-mini="true" data-theme="c">Credits</button>
        </div>
    </div>
</div>

来源：https://stackoverflow.com/questions/20203648/button-relative-position-changes-after-screen-resize