移动浏览器中我的div中的这个空间来自哪里?

时间:2014-02-19 06:54:27

标签: android html css

所以我在我的一个div中有一个奇怪的空间问题,但只有在Android webkit浏览器533.1上查看时(最新版本的webkit android浏览器没有问题)。该问题不会出现在其他地方,也不会出现在桌面设备,较新的移动设备或浏览器上。等等。只有旧的Android股票浏览器。

Here is the web page。有问题的div是带有电话号码和地址的div(屏幕底部,facebook和twitter图标下方)。

我认为你去那里并使用firebug查看代码会更容易,但如果需要我可以在这里发布一些代码。只有大量的CSS(多个媒体查询)。

这是div的代码。间距出现在div中的第一个元素之前:

    <footer class="hideForDesktop" id="ont_foot">
     <div id="footer_div">
      <p id="number">909.390.3092 </p>
      <p> 1155 S. Wanamaker Ave, Ontario, CA 91761</p>


    <div id="bottom-mob-nav">
          <!-- navigation module -->
        <nav id="ontario_nav2">

    <ul>
        <li class="here"><a title="Scandia Home" href="/ontario/index.php">Home</a></li>
        <li><a title="Scandia Rates &amp; Hours" href="/ontario/rates_hours.php">Rates &amp; Hours</a></li>
        <li><a title="Get Directions to Scandia" href="/ontario/directions.php">Directions</a></li>
        <li><a title="Rides, Games, &amp; Fun" href="/ontario/attractions.php">Attractions</a></li>
        <li><a title="Throw Your Party at Scandia!" href="/ontario/parties.php">Parties</a></li>
        <li class="show"><a title="Bring your group party to Scandia" href="/ontario/group_events.php">Group Events</a></li>
      <li><a title="Educational tours at Scandia!" href="/ontario/education.php">Education</a></li>
        </ul>
      </nav>   
    </div>
    <div id="end">
    <p class="boring">&copy; 2014 Scandia Family Fun Center</p>
    <p class="boring">Prices, terms and conditions subject to change without notice. Some rides may be closed during inclement weather.</p>

    <div id="otherLocs">
        <ul>
            <li class="grey"><a href="http://www.scandiafun.com/ontario">Ontario</a></li>
            <li><a href="http://www.scandiafun.com/sacramento">Sacramento</a></li>
            <li><a href="http://www.scandiafun.com/victorville">Victorville</a></li>
        </ul>

    </div>

    <div id="other"><a href="#other">Other locations</a></div>
</div>
    </div>
            </footer>

我已经尝试将div#footer_div高度设置为auto和initial而没有运气。

截图: This is the space that appears on the Android browser - very awkward.

1 个答案:

答案 0 :(得分:0)

所以我找到了一个修复程序,不确定它是否是最好的方法,但它确实有效。我在HTML中验证了一堆问题,但这并没有摆脱它。我在所有div周围放置了边框,发现导致间隙的div。然后我删除了div中的所有内容,发现它仍然有高度(等于间隙的大小。所以在CSS中我将div高度设置为0.这摆脱了差距,然后我只需要重新设置我的CSS中的一些东西,使一切看起来都像它的方式,它的工作。

如果您查看我的原始帖子,导致问题的div是footer#ont_foot