0

我有一个<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。

4

4 回答 4

1

显示inlineinline-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 周围的所有幻像文本。

于 2013-06-17T23:00:46.417 回答
0

在您的 CSS 中,添加:

h1 {
     position: absolute;
}

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

于 2013-06-17T22:54:28.040 回答
0

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

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

header {
    display: inline-block;
}
于 2013-06-17T22:54:55.183 回答
0

将此添加到您的CSS:

h1 {margin-top: -5px;}

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

更新了小提琴

于 2013-06-17T22:51:19.627 回答