内联文本输入扩展包含段落

Question

我在文本段落中使用内联文本输入。正确设置字体大小和行高，但与其他内联元素的行为（例如跨度）不同，段落会扩展以适合文本输入的高度。

问题是我有两条线彼此相邻，需要垂直对齐，一条包含另一条没有的文本输入。因为段落结果是不同的高度准确定位它们是一个问题，因为间距是对段落的边缘而不是内部内联元素。我可以解决差异并相应地对齐，但这似乎肯定会在浏览器中失败。

根本原因似乎是因为我将段落的行高设置为0.99em，使段落的高度小于其中的元素。不幸的是，这是一项要求。我在Chrome中看到了这个问题。我还没有在其他地方测试过。

看看这个小提琴，看看我的意思：

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

跨度有绿色背景，段落为红色背景，包含div为灰色背景。您可以看到第二段获得了额外的间距（在这种情况下为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;
}