0

一部のHTMLに、jqueryボタンがアタッチされたテキストボックスがあります。ユーザーがテキストを入力してから（タブまたはマウスを使用して）テキストボックスからフォーカスを離すと、テキストボックスは不可解に約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では発生しません（テキストボックスの外側の境界線が適度に大きいテキストの下部の一部を上書きします）。おそらく、ある種の行の高さの問題ですか？

4

2 に答える 2

1

純粋な推測。cssに何か関係があるかもしれません。

例えば：

.btn
{
    width: 90px;
}
.btn:focus
{
    width: 200px;
}
于 2012-12-04T14:01:58.850 に答える