javascript - 输入文本后文本框意外移动

Question

我在一些 html 中有一个文本框，上面附加了一个 jquery 按钮。如果用户输入一些文本，然后将焦点从文本框移开(使用 Tab 键或鼠标)，那么文本框会莫名其妙地向下移动大约 4 个像素。

<div class='input-append'>
    <input class="tin" type="text" name="s" />
    <button class="btn btn-large btn-primary" type="submit">GO!</button>
</div>

和CSS:

.tin
{
    font: bold 1.9em sans-serif;
    height: 27px;
    -webkit-border-radius: 12px 0 0 12px;
    -moz-border-radius: 12px 0 0 12px;
    border-radius: 12px 0 0 12px;
    width: 480px;
}

意外的移动发生在 Chrome 和 Safari 中，但 IE 没有，它似乎切断了一些输入的文本(文本框的外边框覆盖了一些相当大的文本底部)，这让我认为这可能是某种行高问题？

Answer 1

纯属猜测。它可能与您的 css 有关。

例如:

.btn
{
    width: 90px;
}
.btn:focus
{
    width: 200px;
}