Question

我在某个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和＆amp ;; Safari，但不是IE，它似乎切断了一些输入的文本（文本框的外边框覆盖了一些相当大的文本底部），这让我觉得它是某种行高问题也许？

Answer 1

纯粹的猜测。它可能与你的CSS有关。

例如：

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

Answer 2

我尝试了你发送的代码。如果我这样写的

<style type="text/css">
        .tin
        {// the css}
    </style>

然后问题被复制，如果我这样写的

<script type="text/css">
        .tin
        {//css}</script>

您使用的是什么方法？

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

2 个答案: