html - 响应式 div block 在移动设备上未正确对齐

Question

我有一个本地消防部门的轮类日历，它是我使用 foundation5 响应式 CSS 框架构建的。在我的浏览器中查看和调整窗口大小时一切正常。
示例:

但是，当我在 iPhone 上查看此内容时，日历日期向上移动了一个街区。

这是我的CSS:

.calRow {
    max-width:100%;
}
.calMonth, .calPrev, .calNext {
    text-transform:uppercase;
    font-weight:bold;
    color:gray;
    font-size:1.7em;
    margin:15px 0;
    text-align:center;
}
.calMonth {
    text-align:center;
}
.calPrev {
    text-align:left;
}
.calNext {
    text-align:right;
}
.pCal ul li {
    text-align:center;
    height:0;
    padding:0 0 14.28571%;
    border-left:solid 1px gray;
    border-top:solid 1px gray;
    position: relative;
}
.pCal ul li:after {
    content:'';
    display: block;
    margin-top: 100%;
}
.pCal ul li dl {
    position:relative;
    padding:0;
    margin:0;
    top:0;
    height:100%;
}

.pCal ul li dl dt {
    padding:0;
    margin:0;
}
.pCal ul li.calHead {
    font-size:0.8em;
    border:none;
    color:gray;
    height:25px;
    margin-bottom:-20px;
}
.calToday {
    border-bottom:0.5em solid lightGrey;
}

.calDay {
    position:relative;
    padding:15%;
    margin:0;
    top:-100%;
}

.calLayer2, .calLayer3, .calLayer4 {
    position:relative;
    padding:0;
}
.calLayer2 {
    top:-200%;
}
.calLayer3 {
    top:-300%;
}
.calLayer4 {
    top:-400%;
}

/*  SHIFT HEIGHT / SIZE STYLES  */

.shift2 {
    height:50%
}
.shift3 {
    height:33.33%
}
.shift4 {
    height:25%
}


/* OVERLAY STYLES  */
.calX img{
    width:100%;
    padding-top:2%;
}
.calCircle img{
    width:100%;
    padding:9% 7%;
}
.calSquare img {
    width:100%;
    padding:7%;
}

.pCal .calDayParts {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

.pCal .calDayOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    width:100%;
}
.calLayer1, .calLayer2, .calLayer3 {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
}

谁能帮我弄清楚这是为什么，或者至少建议一种调试方法。

谢谢

编辑 1 JS FIDDLE 链接

GO HERE对于 jsfiddle 示例 - 在手机上查看时存在同样的问题

旁注，this answer有关于如何通过本地网络使用 iPhone 连接到 Windows PC 上的 IIS 本地主机的说明

Answer 1

如果不能直接检查网站，就很难进行调试。不过，乍一看，我会尝试向 .calRow 类添加一个 float 和 clear，前提是它听起来像(构成日历的行)。

.calRow {
    float: left;
    clear: both;
    width: 100%;
}

请记住，通过 float 日历行，您很可能还需要 float 日历容器。

如果这不能解决问题，很可能与您的绝对定位元素没有相对于其父元素定位有关。

编辑:如果您可以访问 safari，我应该添加 iPhone 和将 iPhone 插入桌面的电源线。您可以通过转到“开发”>“iPhone”在桌面上使用 safari 检查站点。 More info on remote debugging here.