Div定位IOS移动设备与其他浏览器不同

Question

有谁知道如何解决iOS在错误位置显示元素的问题？我有一个网页应用程序，两层div相互叠加。它在桌面上看起来如下：

|--------------------------|
| |div1 - layer 1|         |
| |              |         |
| |              |         |
| |    |div2|    |         |
| |              |         |
| |--------------|         |
| |div3 - layer 1|         |
| |              |         |
| |              |         |
| |    |div4|    |         |
| |              |         |
| |--------------|         |
|--------------------------|

但是在iOS上，无论是Safari / Firefox / Chrome，它看起来都是一个不太引人注目的版本：

|--------------------------|
| |div1 - layer 1|         |
| |              |         |
| |    |div2|    |         |
| |              |         |
| |              |         |
| |----|div4|----|         |
| |div3 - layer 1|         |
| |              |         |
| |              |         |
| |              |         |
| |              |         |
| |--------------|         |
|--------------------------|

无论我使用绝对定位，相对定位，还是使用px或em，或者我是否使用margin-top vs top，都会发生这种情况。似乎没有什么能解决它。只移动div有点但问题仍然存在。 这是别人遇到过的吗？

图片（不包括敏感信息）：

桌面：

的iOS：

HTML：

                                <div id="cdiv" class="fdiv">
                                    <label id="clabel"></label>
                                    <label id="cdatelabel"></label>
                                    <asp:TextBox runat="server" ID="txtcdate" onfocus="select()" class="txtfselect2" AutoPostBack="false" ReadOnly="false"></asp:TextBox>
                                </div>
                                <div id="fdiv" class="fdiv">
                                    <label id="flabel"></label>
                                    <button id="btnp" class="pbtn" onclick="return false;"></button>
                                    <button id="btnx" class="xbtn" onclick="return false;">X</button>
                                    <asp:TextBox runat="server" ID="txtfselect" onfocus="select()" class="txtfselect" AutoPostBack="false" ReadOnly="false"></asp:TextBox>
                                </div>
                               <asp:GridView ID="gtSLdsf" runat="server" CssClass="gcf" CellPadding="0" ForeColor="#333333" AutoGenerateColumns="False" Width="100%" ShowHeader="false">
                                    <Columns>
                                       </Columns>
                                </asp:GridView>
                                <asp:GridView ID="gtSLdsffixed" runat="server" CssClass="gcfixedt" CellPadding="0" ForeColor="#333333" AutoGenerateColumns="False" ShowHeader="false">                       
                                    <Columns>
                                        </Columns>
                                </asp:GridView>

CSS：

#gtSLdsf{
margin-top:2px;
}
#gtSLdsffixed {
position: absolute;
border-right: 4px solid;
border-top: 1px solid;
left: 0px;
top:356px;
z-index: 1;
}
.gcfixedt td{
padding-left: 2px;
padding-right: 2px;
padding-top:2px;
padding-bottom: 2px;
}
#cdiv{
margin-top:-2px
}
.fdiv {
width: 300%;
position: relative;
left: 0px;
display: inline-block;
margin-left: 0px !important;
background-color: #CECECE;
padding-left: 0px;
z-index: 1;
padding-top:3px;
min-height:30px;
}
#containdiv {
height: 100%;
position: relative;
pointer-events: all;
overflow: scroll;
margin-left: 28px;
padding-top: 4px;
}
.body {
height: 99vh;
position: relative;
overflow: hidden;
margin: 2px;
margin-bottom: 0px;
-moz-user-select: none;
-webkit-touch-callout: none;
}