Question

我在<h1>中有<header>，标头有display: inline。出于某种原因，仅在IE9和IE10中，<h1>上方有一个额外的空间。我已经尝试了所有我知道的css重置技巧，但似乎没有任何东西可以消除这个空间。

如何在不改变html结构或标签的情况下删除IE9 / 10中的额外空间，而不更改display: inline中的<header>？而不是在其他浏览器中破坏它？

HTML：

<header>
    <h1>
        why is there a space above this h1 in IE?
    </h1>
</header>

CSS：

* {
    /* padding/margin resets */
    margin: 0;
    padding: 0;
    /* and just so we can see each element */
    outline: 1px solid rgba(0,0,0,.2);
}
header {
    display: inline;
}

Here's a jsfiddle.

Answer 1

显示inline和inline-block查看HTML中的空格。在<header>之前以及<header>和<h1>之间有一个换行符，这就是您所看到的。由于H1本身是display：block;，我没有看到使用display的原因：在h1上内联。

你可以使用它删除它：

body {
  font-size: 0; /* terrible idea */
}
header {
  font-size: 0;
}
h1 {
  font-size: 32px; /* can't be em, since parent is 0 */
}

0处的字体大小有效地删除了h1周围的所有幻像文本。

Answer 2

将此添加到您的css：

h1 {margin-top: -5px;}

这将删除空间。从某种意义上来说，你应该能够通过某种重置来移除空间，但这样才能完成任务。

Updated fiddle

Answer 3

在CSS中，添加：

h1 {
     position: absolute;
}

将此添加到h1标记不应该过多地更改布局，因为它位于较大的标题内。

Answer 4

这是因为你在内联元素中有一个块级元素。看起来IE在这种情况下表现不同。

要解决此问题，请使用内联块而不是内联：http://jsfiddle.net/J4Vtc/21/

header {
    display: inline-block;
}

IE10在内联标题上方有额外的边距。我该如何删除它？

4 个答案: