HTML5 - div 底部的额外空白答案

【问题标题】：HTML5 - Extra white space at the bottom of divHTML5 - div 底部的额外空白
【发布时间】：2013-07-11 14:45:19
【问题描述】：

我正在开发内部使用 IE10 浏览器的 Windows Phone 8 Mobile 应用程序。

我正在尝试从子 div 中删除空白区域，如果先前打开的子 div 的内容多于当前打开的子 div，则会出现。

<div id="parentDiv" style="overflow-x:hidden">
<div id="childDiv1" style="overflow-x:hidden">Content in childDiv1 is greater than childDiv2</div> 
<div id="childDiv2" style="overflow-x:hidden"></div>
</div>

我有一个父 div，ID 为 parentDiv..，其中包含 2 个子 div，ID = childDiv1 和 childDiv2。如果我从应用程序中的任何页面和 childDiv1 导航到 childDiv1，我将导航到 childDiv2，因为 childDiv1 的内容超过 childDiv2 的内容。它会在 childDiv2 的底部产生空白。我正在尝试删除空白区域，但到目前为止似乎没有任何解决方法有帮助。任何帮助将不胜感激。谢谢。

【问题讨论】：

请为你的代码创建一个小提琴..
您是否尝试在您的 innerHTML 为空时强制显示：无？空白空间可能是由 div 元素的自然填充/边距引起的。另一种可能性是强制margin和padding为0；
没有任何关于您的问题特定于 HTML 5 的问题。由于这几乎可以肯定是一个 CSS 问题，因此您应该重新标记并重新命名它。

标签： html space extra

【解决方案1】：

internet explorer 中的许多事情都可能导致空白。

一些选项：

确保将所有涉及的 div 的边距/内边距添加为 0，然后将它们一一移除，直到找出真正需要它的位置。
有时 Internet Explorer 由于字体的原因会在空 div 中添加空间。尝试添加 font-size: 0 来防止这种情况。

【讨论】：

我通过使用line-height : 0 CSS 属性获得了相同的结果，如果由于某种原因使用font-size : 0 导致子元素的许多其他问题（例如在我的情况下）。