0

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

问题是我有两行并排放置，需要垂直对齐，一条包含文本输入，另一条没有。因为段落结果是不同的高度，所以准确定位它们是一个问题，因为间距是在段落的边缘而不是内部内联元素上完成的。我可以计算出差异并相应地对齐，但这似乎肯定会跨浏览器失败。

根本原因似乎是因为我将段落的行高设置为 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;
}
4

0 回答 0