css - 段落を含むインラインテキスト入力が展開されます

Question

テキストの段落でインラインでテキスト入力を使用しています。フォントサイズと行の高さは正しく設定されていますが、他のインライン要素（スパンなど）の動作とは異なり、段落はテキスト入力の高さに合わせて拡張されます。

問題は、垂直方向に整列する必要のある2つの行が隣り合って配置されていることです。一方にはテキスト入力が含まれ、もう一方にはテキスト入力が含まれていません。段落の高さが異なることが判明したため、内側のインライン要素ではなく段落の端に間隔が設定されるため、段落を正確に配置することが問題になります。違いを見つけてそれに応じて調整することもできますが、これはクロスブラウザで失敗することは間違いないようです。

根本的な原因は、段落の行の高さが0.99emに設定されており、段落の高さがその中の要素よりも小さいためと思われます。残念ながら、これは要件です。Chromeでこの問題が発生しています。私はまだ他の場所でテストしていません。

このフィドルを見て、私が何を意味するかを確認してください。

http://jsfiddle.net/MBePU/7/

スパンの背景は緑、段落の背景は赤、含まれているdivの背景は灰色です。2番目の段落に追加の間隔（この場合は7px）が追加されていることがわかります

SOのコードはここに含まれています：HTML：

<div><p><span>Hello</span></p></div>
<div><p><span>Hello</span> <input type="text" value="input"></p></div>

CSS：

body {
    font-size:62.5%;
    font-family:Georgia;
}
div {
    padding:7px 0;
    margin-bottom:20px;
    background:#999;
}
p {
    background:#f00;
    font-size:8.8em;
    line-height:0.99;
}
span {
    background:#0f0;
}
input {
    font-family:Georgia;
    font-size:1em;
    border:0;
    background:#fff;
    margin:0;
    padding:0;
    width:215px;
}