响应式 div 块在移动设备上无法正确对齐答案

【问题标题】：responsive div blocks don't align properly on mobile device响应式 div 块在移动设备上无法正确对齐
【发布时间】：2016-11-02 00:05:04
【问题描述】：

我有一个本地消防部门的轮班日历，我使用 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 的本地主机的说明

【问题讨论】：

这可能很简单，但您是否使用 Zurb 推荐的 <meta> 标签设置了 HTML 文件？
是的，该网站的其余部分按预期运行，它只是这一区域，并且仅在移动设备上查看时。在开发工具中使用内置 chrome 移动模拟器时看起来正确

标签： html css zurb-foundation zurb-foundation-5

【解决方案1】：

如果不能直接检查网站，就很难进行调试。不过乍一看，我会尝试在 .calRow 类中添加一个浮动和清除，只要它听起来像（构成日历的行）。

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

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

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

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

【讨论】：

感谢 jesse，我会尝试其中一些方法，但如果您愿意，可以给我发送电子邮件：jordan ATSIGN krisis DOT ca，我会向您发送网站链接
谢谢，我在 PC 上 - 正在研究在同一个 wifi 网络上从 iPhone 访问 IIS
我添加了一个 js fiddle 的链接，其中包含一个非常接近的示例

【解决方案2】：

好的，所以问题不在于css。我的风格中还有其他风格。我将此 css 放置在 angular2 组件和“encapsulated” css 中，然后它在没有定位错误的情况下工作。它将代码包装在shadow dom

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

【讨论】：