css - IE10 には、インライン ヘッダーの上に余分なマージンがあります。どうすれば削除できますか?

Question

<h1>内にが<header>あり、ヘッダーには がありdisplay: inlineます。何らかの理由で、IE9 と IE10 のみで、. の上に余分なスペースがあり<h1>ます。私が知っているすべてのCSSリセットトリックを試しましたが、このスペースを削除するものは何もないようです.

HTML構造やタグを変更せずに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;
}

これがjsfiddleです。

Answer 1

これを css に追加します。

h1 {margin-top: -5px;}

これにより、スペースが削除されます。ある種のリセットを介してスペースを削除できるはずであるという意味で少しハックですが、それは仕事をします。

フィドルを更新しました。