0

送信ボタンと同じ行と高さにテキスト入力を配置したい。JSFiddleを参照してください。Chrome ではこれは問題なく機能しますが、Firefox では送信ボタンがテキスト入力よりも低くなります。これを修正するにはどうすればよいですか。HTML

<div id="whois-lookup">
    <form id="whois-form">
        <input type="text" placeholder="search" id="name-check" />
        <input type="submit" name="query" />
    </form>
</div>

そしてcss

#whois-lookup input[type=text]
    {
        margin: 0;
        border: 1px solid #aaa;
        border-right: 0px;
        font-size: 1.0em;
        line-height: 25px;
        height: 25px;
        padding: 0 10px;
        width: 188px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        position: relative;
        top: -2px;
    }

    #whois-lookup input[type=text]:focus
    {
        outline: none;
    }

    #whois-lookup input[type=submit]
    {
        margin-left: -4px;
        border: 1px solid #aaa;
        border-left: 0px;
        font-size: 1.0em;
        line-height: 27px;
        height: 27px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        color: #666;
        cursor: pointer;
        background-color: #fff;
    }
4

1 に答える 1

1

前に述べたように (CBroe のコメントを参照)、必要なのは次の CSS だけです。埋め込まれたコメントを参照してください。

#whois-lookup
{
    top: 0;   /** Don't need top/right, no effect for static positioning **/
    right: 0;
}


#whois-lookup input[type=text]
{
    margin: 0;
    border: 1px solid #aaa;
    border-right: 0px;
    font-size: 1.0em;
    line-height: 25px;
    height: 25px;
    padding: 0 10px;
    width: 188px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    position: relative; /** Not needed relative/top **/
    top: -2px; 
    vertical-align: bottom; /** top will also work... **/
}

#whois-lookup input[type=text]:focus
{
    outline: none;
}

#whois-lookup input[type=submit]
{
    margin-left: -4px;
    border: 1px solid #aaa;
    border-left: 0px;
    font-size: 1.0em;
    line-height: 27px;
    height: 27px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #666;
    cursor: pointer;
    background-color: #fff;
    vertical-align: bottom; /** top will also work... **/
}

入力テキストと入力送信要素に 2 つの異なる行の高さと高さを設定します。完全に明らかではありませんが、機能しているようです。

フィドル: http://jsfiddle.net/audetwebdesign/WVG9L/17/

于 2013-04-26T14:43:30.310 に答える