响应式 div 块在移动设备上未正确对齐

Question

我有一个当地消防部门的轮班日历，是我使用 foundation5 响应式 css 框架构建的。在我的浏览器中查看并调整 window.
大小时一切正常 示例：

但是，当我在 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 LINK

GO HERE 对于 jsfiddle 示例 - 在 phone

上查看时存在同样的问题

旁注，this answer 有关于如何使用 iPhone 通过本地网络连接到 windows PC

上的 IIS 本地主机的说明

Answer 1

如果不能第一手检查站点，就很难进行调试。不过，乍一看，我会尝试向 .calRow class 添加一个 float 和 clear，前提是它听起来像（构成日历的行）。

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

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

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

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

Answer 2

好的，所以问题不在于 css 。还有其他风格渗入我的风格。我将这个 css 放在一个 angular2 组件中，并且“encapsulated" the css, then it worked without the positioning error. It wraps the code in a shadow dom

我从来没有发现我的风格是什么，但现在问题已经解决了。

响应式 div 块在移动设备上未正确对齐

responsive div blocks don't align properly on mobile device

html

css

zurb-foundation

zurb-foundation-5

编辑 1 个 JS FIDDLE LINK