Question

我在页面的右下角有一个按钮。我的问题是1）Firefox似乎将按钮放在与Chrome或IE9不同的位置，2）当我在初始加载后调整屏幕大小时，按钮的相对位置会发生变化。

我发现SO上的hack似乎有助于解决FF问题（请参阅代码）...但是在初始页面加载后我仍然遇到按钮重新定位的问题。在所有3个浏览器中，首次打开页面时按钮的位置可能高出15个像素（远离底部边框），但随后在任何调整大小（最大化或用鼠标拉动屏幕边框）时按钮向下移动到底部边框，然后在我改变屏幕尺寸时保持相对位置。

在我调整屏幕大小后，有没有办法让初始按钮位置与其位置相同？我正在使用JQuery Mobile和ArcGIS Javascript API（基于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>

屏幕调整大小后按钮相对位置发生变化

0 个答案: