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

Question

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

display: inline如何在不更改 html 结构或标签且不更改<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;
}

这是一个jsfiddle。

Answer 1

显示inline和inline-block查看 HTML 中的空格。在and之前<header>和之间有一个换行符，这就是您所看到的。由于 H1 本身是 display: block;，我看不出在 h1 上使用 display: inline 的原因。<header><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 {
     position: absolute;
}

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

Answer 3

这是因为您在内联元素中有一个块级元素。在这种情况下，IE 的行为似乎有所不同。

要修复它，请使用 inline-block 而不是 inline：http: //jsfiddle.net/J4Vtc/21/

header {
    display: inline-block;
}

Answer 4

将此添加到您的CSS：

h1 {margin-top: -5px;}

这将删除空间。从某种意义上说，您应该能够通过某种重置来删除空间，但这有点麻烦，但它确实可以完成工作。

更新了小提琴。