在 iPad 上查看时，两个固定位置的 div 会产生边距

Posted 2023-03-12

【中文标题】在 iPad 上查看时，两个固定位置的 div 会产生边距

【英文标题】：Two fixed position divs develop margin when viewed on iPad

【发布时间】：2014-07-11 04:06:45

【问题描述】：

在 www.fleetwoodlifecoaching.co.nz 建立一个网站，从台式计算机上查看时一切看起来都很棒，但是当我从 iPad 上查看该网站时，构成导航的两个固定位置 div 之间出现了一个奇怪的空白栏和标题区域（见屏幕截图）。它们的定位非常精确和清晰，iPad 解码它的方式会破坏它 - 解决这个问题的最佳方法是什么？

提前感谢您的帮助

显然我没有足够的声誉来发布图片，所以这里有一个 imgur 链接。 http://imgur.com/0PEn41r

编辑：所以基本上我有两个彼此相对的 div，一个称为 nav 沿左侧运行，另一个称为 header 沿顶部运行。下面是每个的 CSS：

#nav 
position: fixed;
margin-left: -8px;
margin-top: -17.5px;
padding-left: 40px;
width: 140px;
height: 100%;
background: #8E8074;
list-style: none;
z-index: 7;


#header 
position: fixed;
width: calc(100% + 16px);
height: 100px;
background-color: #8E8074;
margin-left: -8px;
margin-top: -120px;
padding-bottom: 3px;
z-index: 6;

【问题讨论】：

用您尝试过的一些代码向我们抱怨。但说真的，请向我们展示您正在使用的代码。

【参考方案1】：

也许尝试使第一个块底部的边距负几个像素。如果这将第二块拉高一点，可能会掩盖白线。如果这不起作用，那么它显然是一个编码问题，而不是你的设计中实际上存在白色的间隙或条带。在你真正深入研究之前可能要尝试一些东西。

【讨论】：

是的，这仅在 iPad 上发生，更改边距值会使其在其他任何地方出现错误。有什么想法可以让某些东西只在 iPad 上以某种方式出现吗？也许是媒体查询或类似的？谢谢

【参考方案2】：

移动 safari 可能会将 0.5px 向上舍入为 -17px，从而在两个 div 之间留下 1px 的间隙，请尝试将 #nav 的 margin-top 更改为 -18px 而不是 -17.5px。 然后#nav 样式将变为：

CSS

#nav 
    position: fixed;
    margin-left: -8px;
    margin-top: -18px;
    padding-left: 40px;
    width: 140px;
    height: 100%;
    background: #8E8074;
    list-style: none;
    z-index: 7;