4

http://cardiffhosp.rapdevs.co.uk/是围绕 WooTheme Canvas 构建的，这是一种响应式设计。

我不得不禁用视口元标记，因为我不希望布局响应。

现在它在移动设备上看起来好多了，但右侧出现了一个白色区域。大部分在 iPhone/iPad 上可见，但在其他设备上缩小显示存在空白。

添加以下代码，解决了我的问题，但导致导航在 iPhone 上停止工作并导致 Windows 7 手机上的显示问题......

html, body {
   overflow-x:hidden;
}

有没有人有更好的解决方案来去除空白？

4

1 回答 1

1

您可以尝试添加width:100%，看看是否解决了溢出导致的问题，IE：

html, body {
    overflow-x:hidden;
    width:100%;
   /* You may also want to try adding:*/
    margin: 0;
    padding: 0;
}

如果这仍然导致问题，那么您将需要找到导致问题的元素。

几种方法可以做到这一点。（请务必overflow-x:hidden;在开始之前删除。）

1) 打开检查器，从包含其他元素的 div 或元素开始。将这些 div 设置为display:none. 如果多余的空白消失了，那么你可以找到有问题的元素并修复它的 CSS。

如果该选项太耗时或您在执行此操作时遇到困难，您可以尝试其他选项：

2)这个网站有一些 CSS 概述了您网站上的所有元素。这可以帮助您找到导致溢出的原因。本网站使用的 CSS 是：

* {
   background: #000 !important;
   color: #0f0 !important;
   outline: solid #f00 1px !important;
}

他们还提供了一个javascript 书签，这也有助于解决这个问题。

于 2015-07-05T00:41:13.200 回答