Question

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

提前感谢您的帮助

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

编辑：所以基本上我有两个正好相互对抗的div，一个叫做nav的左边是另一个叫另一个叫做沿着顶部运行的标题。以下是每个的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;
}

Answer 1

也许尝试将第一个块底部的边距减去几个像素。如果它将第二个块向上拉一点可能会掩盖白线。如果这不是明显的编码问题，而不是在你的设计中实际上有一个白色的间隙或条带。在您真正深入研究之前，可能会尝试一些事情。

Answer 2

.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;
}

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

2 个答案: